@weavy/uikit-react 14.0.3 → 15.0.0

package/src/components/Blob.tsx

@@ -0,0 +1,28 @@
+import classNames from "classnames";
+import React from "react";
+import Icon from "../ui/Icon";
+import { getExtension, getIcon, getKind } from "../utils/fileUtilities";
+import { toKebabCase } from "../utils/utils";
+
+type Props = {
+    id: number,
+    name: string
+    className?: string,
+    children?: React.ReactNode
+}
+const Blob = ({ id, name, className, children }: Props) => {
+    let ext = getExtension(name);
+    let { icon } = getIcon(name);
+    let kind = getKind(name)
+    return (
+        <div className='wy-item'>
+            <Icon.UI name={icon} size={1} className={classNames("wy-kind-" + toKebabCase(kind), "wy-ext-" + ext.substring(1))} />
+            <div className='wy-item-body'>
+                {name}
+            </div>
+            {children}
+        </div>      
+    )
+}
+
+export default Blob;

package/src/components/Comment.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import CommentEdit from './CommentEdit';
+import CommentTrashed from './CommentTrashed';
+import CommentView from './CommentView';
+
+type Props = {
+    appId: number,
+    parentId: number,
+    id: number,
+    text: string,
+    html: string,
+    created_at: string,
+    modified_at?: string,
+    created_by: MemberType,
+    trashed_at?: string,
+    attachments: FileType[],
+    reactions: ReactableType[],
+    embed: EmbedType | undefined,
+    is_trashed: boolean
+
+}
+
+
+const Comment = ({ ...props }: Props) => {
+    const [edit, setEdit] = useState<boolean>(false);
+
+    return (
+        <div className='wy-comment'>
+            {props.is_trashed && 
+                <CommentTrashed {...props} />                
+            }
+            {!props.is_trashed && edit &&
+                <CommentEdit {...props} onClose={() => setEdit(prev => !prev)} />
+            }
+
+            {!props.is_trashed && !edit &&
+                <CommentView {...props} onEdit={() => setEdit(prev => !prev)} />
+            }
+        </div>
+    )
+}
+
+export default Comment;

package/src/components/CommentCount.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+type Props = {
+    id: number,
+    count: number
+}
+
+const CommentCount = ({ id, count }: Props) => {
+
+    return (
+        <>{count} {'comment' + (count !== 1 ? 's': '')}</>        
+    )
+}
+
+export default CommentCount;

package/src/components/CommentEdit.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Icon from '../ui/Icon';
+import Button from '../ui/Button';
+import Editor from './Editor';
+import useMutateEditComment from '../hooks/useMutateEditComment';
+
+type Props = {
+    appId: number,
+    parentId: number,
+    id: number,
+    text: string,
+    html: string,
+    created_at: string,
+    created_by: MemberType,
+    attachments: FileType[],
+    reactions: ReactableType[],
+    embed: EmbedType | undefined,
+    onClose: (e?: any) => void
+}
+
+const CommentEdit = ({ appId, parentId, id, text, embed, attachments, onClose }: Props) => {
+    const editCommentMutation = useMutateEditComment();
+
+    const handleUpdate = async (text: string, blobs: BlobType[], attachments: FileType[], meeting: number | null, embed: number | null,  options: PollOptionType[]) => {
+        await editCommentMutation.mutateAsync({ id: id, appId: appId, parentId: parentId, text: text, blobs: blobs, attachments: attachments, meeting: meeting, embed: embed });
+        onClose();
+    }
+
+    return (
+        <>
+            <nav className='wy-item'>
+                <div className='wy-item-body'>
+                    <div className='wy-item-title'>Edit comment</div>
+                </div>
+
+                <a className='wy-button wy-button-icon'>
+                    <Button.UI onClick={onClose}>
+                        <Icon.UI name="close" />
+                    </Button.UI>
+
+                </a>
+            </nav>
+            <Editor editorType='posts' editorLocation='posts' id={id} appId={appId} placeholder={'Update the comment'} text={text} embed={embed} attachments={attachments} buttonText='Update' onSubmit={handleUpdate} showAttachments={true} showCloudFiles={true} showEmbeds={false} showPolls={false} />
+        </>
+    )
+}
+
+export default CommentEdit;

package/src/components/CommentPlaceholder.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Avatar from './Avatar';
+
+type Props = {
+    text: string,
+    created_at: string,
+    created_by: MemberType
+}
+
+
+const CommentPlaceholder = ({ ...props }: Props) => {
+
+    return (
+        <div className='wy-comment'>
+            <div className='wy-item wy-comment-header'>
+                <img alt="" className="wy-avatar wy-placeholder" height={32} width={32} src={props.created_by.avatar_url} />
+
+                <div className='wy-item-body'>
+                    <div className='wy-item-title'><span className='wy-placeholder'>Placeholder name</span></div>
+                    <div className='wy-item-text'><time className='wy-placeholder' dateTime='2022-12-31 00:00:00'>2022-12-31 00:00:00</time></div>
+                </div>
+            </div>
+            <div className='wy-comment-body'>
+                <div className='wy-comment-content'>
+                    <div className='wy-content'>
+                        <span className='wy-placeholder'>Lorem</span> <span className='wy-placeholder'>ipsum</span> <span className='wy-placeholder'>dolor</span> <span className='wy-placeholder'>sit</span> <span className='wy-placeholder'>amet.</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CommentPlaceholder;

package/src/components/CommentTrashed.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useQueryClient } from "react-query";
+import useMutateRestoreComment from "../hooks/useMutateRestoreComment";
+import Button from '../ui/Button';
+import { updateCacheItem } from "../utils/cacheUtils";
+
+type Props = {
+    appId: number,
+    parentId: number,
+    id: number,
+    text: string,
+    html: string,
+    created_at: string,
+    created_by: MemberType,
+    attachments: FileType[],
+    reactions: ReactableType[],
+    embed: EmbedType | undefined    
+}
+
+
+const CommentTrashed = ({id, appId, parentId}: Props) => {
+
+    const restoreComment = useMutateRestoreComment();
+    const queryClient = useQueryClient();
+
+    const handleUndo = () => {
+        restoreComment.mutate({ id: id, appId: appId, parentId: parentId}, {
+            onSuccess: () => {
+                updateCacheItem(queryClient, ['posts', appId], parentId, (item: MessageType) => {                
+                    item.comment_count = (item.comment_count || 0) + 1;
+                });                
+            }
+        });
+    }
+
+    return (
+        <div className="wy-item wy-item-lg">
+            <div className="wy-item-body">Comment was trashed.</div>
+            <Button.UI onClick={handleUndo} className='wy-button-variant'>Undo</Button.UI>
+            
+        </div>
+    )
+}
+
+export default CommentTrashed;

package/src/components/CommentView.tsx

@@ -0,0 +1,142 @@
+import React, { useContext } from 'react';
+import dayjs from 'dayjs';
+import Dropdown from '../ui/Dropdown';
+import Icon from '../ui/Icon';
+import { ReactionsList, ReactionsMenu } from './Reactions';
+import Image, { ImageGrid } from './Image';
+import Attachment from './Attachment';
+import Avatar from './Avatar';
+import Embed from './Embed';
+import { UserContext } from '../contexts/UserContext';
+import { PreviewContext } from "../contexts/PreviewContext";
+import useMutateTrashComment from '../hooks/useMutateTrashComment';
+import { useQueryClient } from 'react-query';
+import { updateCacheItem } from '../utils/cacheUtils';
+
+type Props = {
+    appId: number,
+    parentId: number,
+    id: number,
+    text: string,
+    html: string,
+    created_at: string,
+    modified_at?: string,
+    created_by: MemberType,
+    trashed_at?: string,
+    attachments: FileType[],
+    reactions: ReactableType[],
+    embed: EmbedType | undefined,
+    onEdit: (e: any) => void
+}
+
+const CommentView = ({ appId, id, parentId, html, created_at, modified_at, created_by, attachments, reactions, embed, onEdit }: Props) => {
+    const { user } = useContext(UserContext);
+    const queryClient = useQueryClient();
+    const { openPreview, setPreviewFiles } = useContext(PreviewContext);
+    const date = dayjs.utc(created_at).tz(dayjs.tz.guess());
+    const trashComment = useMutateTrashComment();
+
+    let images = attachments?.filter((a: FileType) => a.kind === "image" && a.thumbnail_url);
+    let files = attachments?.filter((a: FileType) => a.kind !== "image" || !a.thumbnail_url);
+
+    const handlePreviewClick = (e: React.MouseEvent<HTMLInputElement>, attachmentId: number) => {
+        e.preventDefault();
+        setPreviewFiles(attachments);
+        openPreview(attachmentId);
+    }
+
+    const handleDelete = () => {
+        trashComment.mutate({ id: id, appId: appId, parentId: parentId }, {
+            onSuccess: () => {
+                updateCacheItem(queryClient, ['posts', appId], parentId, (item: MessageType) => {                
+                    item.comment_count = (item.comment_count || 1) - 1;
+                });                
+            }
+        });
+    }
+
+    return (
+        <>
+            <div className='wy-item wy-item-sm wy-comment-header'>
+                <Avatar src={created_by.avatar_url} size={32} name={created_by.display_name} />
+                <div className='wy-item-body'>
+                    <div className='wy-item-title'>{created_by.display_name}</div>
+                    <div className='wy-item-text'>
+                        <time dateTime={created_at} title={date.format('LLLL')}>{date.fromNow()}</time>
+                        {modified_at &&
+                            <time dateTime={modified_at}> · edited</time>
+                        }
+                    </div>
+                </div>
+
+                <div className='wy-item-actions wy-item-actions-top'>
+                    <Dropdown.UI directionX='left'>
+
+                        {/* subscribe / unsubscribe */}
+
+                        {/* edit action */}
+                        {user.id === created_by.id &&
+                            <Dropdown.Item onClick={onEdit}>
+                                <Icon.UI name="pencil"></Icon.UI> Edit
+                            </Dropdown.Item>
+                        }
+
+                        {/* trash action */}
+                        {user.id === created_by.id &&
+                            <Dropdown.Item onClick={handleDelete}>
+                                <Icon.UI name="trashcan"></Icon.UI> Trash
+                            </Dropdown.Item>
+                        }
+                    </Dropdown.UI>
+                </div>
+
+            </div>
+
+            <div className='wy-comment-body'>
+                <div className='wy-comment-content'>
+                    {/* image grid */}
+                    {images && !!images.length && <ImageGrid>
+                        {images.map((a: FileType) =>
+                             <React.Fragment key={a.id} >
+                                {a.download_url &&
+                                    <Image onClick={(e) => handlePreviewClick(e, a.id)} key={a.id} src={a.download_url} previewSrc={a.preview_url} width={a.width} height={a.height} />
+                                }
+                            </React.Fragment>
+                        )}
+                    </ImageGrid>}
+
+                    {/* embeds */}
+                    {embed &&
+                        <Embed embed={embed} />
+                    }
+
+                    <div className='wy-content' dangerouslySetInnerHTML={{ __html: html }}>
+                        {/* markdown */}
+
+                    </div>
+
+                    {/* poll */}
+
+                    {/* files */}
+                    {files && !!files.length && <div className="wy-list wy-list-bordered">
+                        {files.map((a: FileType) =>
+                            <Attachment key={a.id} onClick={(e) => handlePreviewClick(e, a.id)} name={a.name} previewFormat={a.kind} provider={a.provider} url={a.download_url} previewUrl={a.provider ? a.external_url : a.preview_url} mediaType={a.media_type} kind={a.kind} size={a.size} />
+                        )}
+                    </div>}
+
+                    {/* meeting */}
+                </div>
+            </div>
+
+            
+            <div className='wy-reactions-line'>
+                {/* reactions */}
+                <ReactionsList id={id} type="comments" parentId={parentId} reactions={reactions} />
+                <ReactionsMenu id={id} type="comments" parentId={parentId} reactions={reactions} placement="top-end" />
+            </div>
+        
+        </>
+    )
+}
+
+export default CommentView;

package/src/components/Comments.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import useCommentList from '../hooks/useCommentList';
+import useMutateComment from '../hooks/useMutateComment';
+import Spinner from '../ui/Spinner';
+import { updateCacheItem } from '../utils/cacheUtils';
+import Comment from './Comment';
+import CommentPlaceholder from './CommentPlaceholder';
+import Editor from './Editor';
+
+type Props = {
+    appId: number,
+    parentId: number,
+    type: "posts" | "files" | "apps"
+}
+
+const Comments = ({ appId, parentId, type }: Props) => {
+    const queryClient = useQueryClient();
+    const addCommentMutation = useMutateComment();
+    const { isLoading, isError, data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } = useCommentList(parentId, type, {});
+
+    const handleCreate = async (text: string, blobs: BlobType[], attachments: FileType[], meeting: number | null, embed: number | null,  options: PollOptionType[]) => {
+        await addCommentMutation.mutateAsync({ parentId: parentId, type: type, text: text, blobs: blobs, meeting: null, embed: embed }, {
+            onSuccess: (data: MessageType) => {                                
+                updateCacheItem(queryClient, [type, appId], parentId, (item: MessageType) => {                
+                    item.comment_count = (item.comment_count || 0) + 1;
+                });
+            }
+        });
+    }
+
+    if (isLoading) {
+        return (<div className='wy-buttons'><Spinner.UI /></div>)
+    }
+    return (
+        <div>
+            <div className='wy-comments'>
+                {!isLoading && data && data.pages && data.pages.map((group, i) => {
+                    return <React.Fragment key={data.pages.length - i}>
+                        {
+                            group.data?.map((comment: MessageType) => {
+                                return comment.temp ?
+                                    <CommentPlaceholder key={'comment' + comment.id} text={comment.text} created_at={comment.created_at} created_by={comment.created_by} /> :
+                                    <Comment
+                                        key={'comment' + comment.id}
+                                        appId={appId}
+                                        parentId={parentId}
+                                        id={comment.id}
+                                        text={comment.text}
+                                        html={comment.html}
+                                        created_at={comment.created_at}
+                                        modified_at={comment.modified_at}
+                                        created_by={comment.created_by}
+                                        trashed_at={comment.trashed_at}
+                                        attachments={comment.attachments}
+                                        reactions={comment.reactions}
+                                        embed={comment.embed}
+                                        is_trashed={comment.is_trashed}
+                                    />
+                            })
+                        }
+                    </React.Fragment>
+                })}
+
+            </div>
+
+            {type === "files" ?
+                <div className='wy-comment-editor-bottom'>
+                    <Editor editorType='comments' editorLocation={type} appId={appId} parentId={parentId} placeholder={'Create a comment'} buttonText="Comment" onSubmit={handleCreate} showAttachments={true} showCloudFiles={true} showEmbeds={false} showPolls={false} useDraft={true} />
+                </div>
+            :
+                <Editor editorType='comments' editorLocation={type} appId={appId} parentId={parentId} placeholder={'Create a comment'} buttonText="Comment" onSubmit={handleCreate} showAttachments={true} showCloudFiles={true} showEmbeds={false} showPolls={false} useDraft={true} />
+            }
+        </div>
+    )
+}
+
+export default Comments;

package/src/components/Conversation.tsx

@@ -17,6 +17,7 @@ import useMutateRemoveMembers from '../hooks/useMutateRemoveMembers';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
 import Messages from './Messages';
+import useMutateLeaveConversation from '../hooks/useMutateLeaveConversation';
 
 const Conversation = ({ id, showBackButton }: ConversationProps) => {
 
@@ -41,7 +42,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
         enabled: selectedConversationId != null
     });
 
-    const { isLoading: isLoadingMembers, data: dataMembers } = useMembers(selectedConversationId, {
+    const { isLoading: isLoadingMembers, data: dataMembers, refetch: refetchMembers } = useMembers(selectedConversationId, {
         // The query will not execute until the activeConversation exists
         enabled: selectedConversationId != null
     });
@@ -51,14 +52,14 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
     const addMembersMutation = useMutateMembers();
     const updateNameMutation = useMutateConversationName();
     const removeMembers = useMutateRemoveMembers();
+    const leaveConversation = useMutateLeaveConversation();
 
-    const handleRealtimeAppUpdated = useCallback((realtimeEvent: RealtimeApp) => {        
+    const handleRealtimeAppUpdated = useCallback((realtimeEvent: RealtimeApp) => {
         if (realtimeEvent.app.id !== selectedConversationId) return;
         queryClient.invalidateQueries(['conversation', selectedConversationId]);
     }, [selectedConversationId]);
 
-    const handleAdd = async (selected: UserType[]) => {
-
+    const handleAdd = async (selected: MemberType[]) => {
         const membersList = selected.map((m) => m.id);
         await addMembersMutation.mutateAsync({ id: selectedConversationId, members: membersList });
         setModalAddOpen(false);
@@ -74,11 +75,29 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
 
     const handleUpdateTitle = (e: any) => {
         setTitle(e.target.value);
-        updateNameMutation.mutate({ id: selectedConversationId, name: e.target.value });
+    }
+
+    const handleSaveTitle = () => {
+        updateNameMutation.mutate({ id: selectedConversationId, name: title || null });
     }
 
     const handleLeaveConversation = () => {
-        removeMembers.mutate({ id: selectedConversationId, members: [user.id] });
+        leaveConversation.mutate({ id: selectedConversationId, members: [user.id] });
+        setModalDetailsOpen(false);
+        setModalAddOpen(false);
+    }
+
+    const handleAddMembers = () => {
+        setModalDetailsOpen(false);
+        setModalAddOpen(true);
+    }
+
+    const handleRemoveMember = (id: number) => {
+        removeMembers.mutate({ id: selectedConversationId, members: [id] }, {
+            onSuccess: () => {
+                refetchMembers();
+            }
+        });
     }
 
     const handleBack = () => {
@@ -111,11 +130,11 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
         if (dataConversation && dataConversation.type === ChatRoom) {
             setTitle(dataConversation?.display_name);
         }
-        if(dataConversation && (dataConversation.type === ChatRoom || dataConversation.type === Chat)){
+        if (dataConversation && (dataConversation.type === ChatRoom || dataConversation.type === Chat)) {
             setIsRoomOrChat(true)
         }
     }, [dataConversation]);
-
+    
     return (
         <>
             <header className="wy-appbars" data-adjust-scrollbar-top>
@@ -134,12 +153,21 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                             </div>
                             <Dropdown.UI directionX='left'>
 
-                                <Dropdown.Item onClick={() => toggleDetailsModal(true)}>Details</Dropdown.Item>
+                                <Dropdown.Item onClick={() => toggleDetailsModal(true)}>
+                                    <Icon.UI name="information"></Icon.UI>
+                                    Details
+                                </Dropdown.Item>
 
                                 {dataConversation.type === ChatRoom &&
                                     <>
-                                        <Dropdown.Item onClick={() => toggleAddModal(true)}>Add people</Dropdown.Item>
-                                        <Dropdown.Item onClick={handleLeaveConversation}>Leave conversation</Dropdown.Item>
+                                        <Dropdown.Item onClick={() => toggleAddModal(true)}>
+                                            <Icon.UI name="account-plus"></Icon.UI>
+                                            Add members
+                                        </Dropdown.Item>
+                                        <Dropdown.Item onClick={handleLeaveConversation}>
+                                            <Icon.UI name="account-minus"></Icon.UI>
+                                            Leave conversation
+                                        </Dropdown.Item>
                                     </>
                                 }
 
@@ -157,52 +185,78 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                 </div>
             }
             {selectedConversationId && dataMembers && dataConversation &&
-                <Messages id={selectedConversationId} chatRoom={isRoomOrChat} members={dataMembers} displayName={dataConversation?.display_name} avatarUrl={dataConversation?.avatar_url} lastMessageId={dataConversation?.last_message?.id}/>
+                <Messages id={selectedConversationId} chatRoom={isRoomOrChat} members={dataMembers} displayName={dataConversation?.display_name} avatarUrl={dataConversation?.avatar_url} lastMessageId={dataConversation?.last_message?.id} />
             }
 
             <Overlay.UI isOpen={modalAddOpen} className="wy-modal">
                 <header className="wy-appbars" data-adjust-scrollbar-top>
                     <nav className="wy-appbar">
                         <Button.UI onClick={() => toggleAddModal(false)}><Icon.UI name='close' /></Button.UI>
-                        <div className="wy-appbar-text">Add people</div>
+                        <div className="wy-appbar-text">Add members</div>
                     </nav>
                 </header>
-                <SearchUsers handleSubmit={handleAdd} buttonTitle="Add selected" />
+                {dataMembers &&
+                    <SearchUsers existingMembers={dataMembers.data} handleSubmit={handleAdd} buttonTitle="Save" />
+                }
+
             </Overlay.UI>
 
             <Overlay.UI isOpen={modalDetailsOpen} className="wy-modal">
                 <header className="wy-appbars">
                     <nav className="wy-appbar">
                         <Button.UI onClick={() => toggleDetailsModal(false)}><Icon.UI name='close' /></Button.UI>
-                        <div className="wy-appbar-text">Conversation details</div>
+                        <div className="wy-appbar-text">Details</div>
                     </nav>
                 </header>
                 <div className='wy-scroll-y'>
-                    {dataConversation && <div className="wy-avatar-header">                        
+                    {dataConversation && <div className="wy-avatar-header">
                         <Avatar src={dataConversation?.avatar_url} name={title} size={128} />
-                        {dataConversation?.type !== ChatRoom &&                        
-                        <h3 className="wy-headline">{dataConversation?.display_name}</h3>                    
+                        {dataConversation?.type !== ChatRoom &&
+                            <h3 className="wy-headline">{dataConversation?.display_name}</h3>
                         }
                     </div>}
 
                     {dataConversation?.type === ChatRoom && (
                         <>
                             <div className="wy-pane-group">
-                                <input className="wy-input" value={title} onChange={(e) => handleUpdateTitle(e)} />
+                                <label className="wy-input-label">Conversation name</label>
+                                <div className="wy-input-group">
+
+                                    <input className="wy-input" value={title} onChange={(e) => handleUpdateTitle(e)} />
+                                    <Button.UI onClick={handleSaveTitle} className="wy-button-icon">
+                                        <Icon.Raw name="content-save" />
+                                    </Button.UI>
+                                </div>
+                                <div className="wy-description">Changing the name of a group chat changes it for everyone.</div>
+
                             </div>
                             <div className="wy-pane-group">
-                                <table className="wy-table wy-search-result-table">
-                                    <tbody>
-                                        {dataMembers && dataMembers.data && dataMembers.data.map((m: MemberType) => {
-                                            return (
-                                                <tr key={m.id}>
-                                                    <td className="wy-table-cell-icon wy-search-result-table-icon"><Avatar src={m.avatar_url} name={m.display_name} id={m.id} size={24} presence={m.presence} /></td>
-                                                    <td className='wy-table-cell-text'>{m.display_name}</td>
-                                                </tr>
-                                            )
-                                        })}
-                                    </tbody>
-                                </table>
+                                <label className="wy-input-label">Members</label>
+
+                                {dataConversation && dataMembers && dataMembers.data && dataMembers.data.map((m: MemberType) => {
+                                    return (
+                                        <div className='wy-item' key={m.id}>
+                                            <Avatar src={m.avatar_url} name={m.display_name} id={m.id} size={32} presence={m.presence} />
+                                            <div className="wy-item-body">
+                                                {m.display_name}
+                                            </div>
+                                            {dataConversation.created_by_id === user.id && m.id !== user.id &&
+                                                <Button.UI onClick={() => handleRemoveMember(m.id)} className="wy-button-icon" title="Remove member">
+                                                    <Icon.Raw name="account-minus" />
+                                                </Button.UI>
+                                            }
+                                            {m.id === user.id &&
+                                                <Button.UI onClick={() => handleLeaveConversation()} className="wy-button-icon" title="Leave conversation">
+                                                    <Icon.Raw name="account-minus" />
+                                                </Button.UI>
+                                            }
+                                        </div>
+                                    )
+                                })}
+                                <Button.UI onClick={handleAddMembers} title="Add members">
+                                    <Icon.UI name="account-plus"/> 
+                                    <div className="wy-item-body">Add members</div>
+                                </Button.UI>
                             </div>
                         </>
                     )}