BA-2211: delete chat messages

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.0.9
+
+### Patch Changes
+
+- Enabled deletion of chat room messages
+
 ## 1.0.8
 
 ### Patch Changes

packages/components/modules/__shared__/web/ActionsOverlay/DefaultHoverOverlay/index.tsx

@@ -9,8 +9,9 @@ import { DefaultHoverOverlayProps } from './types'
 const DefaultHoverOverlay: FC<DefaultHoverOverlayProps> = ({
   offsetRight,
   offsetTop,
-  enableDelete,
+  showDeleteButton,
   isDeletingItem,
+  disableDeleteButton,
   handleDeleteDialogOpen,
   actions = [],
   handleLongPressItemOptionsClose,
@@ -20,10 +21,10 @@ const DefaultHoverOverlay: FC<DefaultHoverOverlayProps> = ({
     offsetTop={offsetTop}
     aria-label="actions overlay"
   >
-    {enableDelete && (
+    {showDeleteButton && (
       <IconButton
         onClick={handleDeleteDialogOpen}
-        disabled={isDeletingItem}
+        disabled={isDeletingItem || disableDeleteButton}
         aria-label="delete item"
       >
         <TrashCanIcon />

packages/components/modules/__shared__/web/ActionsOverlay/DefaultHoverOverlay/types.ts

@@ -3,7 +3,12 @@ import { ActionOverlayProps } from '../types'
 export interface DefaultHoverOverlayProps
   extends Pick<
     ActionOverlayProps,
-    'actions' | 'offsetRight' | 'offsetTop' | 'enableDelete' | 'isDeletingItem'
+    | 'actions'
+    | 'offsetRight'
+    | 'offsetTop'
+    | 'showDeleteButton'
+    | 'isDeletingItem'
+    | 'disableDeleteButton'
   > {
   handleDeleteDialogOpen: () => void
   handleLongPressItemOptionsClose: () => void

packages/components/modules/__shared__/web/ActionsOverlay/ThreeDotsMenuHoverOverlay/index.tsx

@@ -12,8 +12,9 @@ import { ThreeDotsMenuHoverOverlayProps } from './types'
 const ThreeDotsMenuHoverOverlay: FC<ThreeDotsMenuHoverOverlayProps> = ({
   offsetRight,
   offsetTop,
-  enableDelete,
+  showDeleteButton,
   isDeletingItem,
+  disableDeleteButton,
   handleDeleteDialogOpen,
   actions = [],
   handleClosePopover,
@@ -54,10 +55,17 @@ const ThreeDotsMenuHoverOverlay: FC<ThreeDotsMenuHoverOverlayProps> = ({
             </MenuItem>
           )
         })}
-        {enableDelete && (
-          <MenuItem onClick={handleDeleteDialogOpen} disabled={isDeletingItem}>
-            <TrashCanIcon />
-            <Typography variant="body2" color="error">
+        {showDeleteButton && (
+          <MenuItem
+            onClick={handleDeleteDialogOpen}
+            disabled={isDeletingItem || disableDeleteButton}
+            color="disabled"
+          >
+            <TrashCanIcon sx={{ color: disableDeleteButton ? 'text.disabled' : 'error.main' }} />
+            <Typography
+              variant="body2"
+              color={disableDeleteButton ? 'text.disabled' : 'error.main'}
+            >
               Delete
             </Typography>
           </MenuItem>

packages/components/modules/__shared__/web/ActionsOverlay/ThreeDotsMenuHoverOverlay/types.ts

@@ -5,7 +5,12 @@ import { ActionOverlayProps } from '../types'
 export interface ThreeDotsMenuHoverOverlayProps
   extends Pick<
     ActionOverlayProps,
-    'actions' | 'offsetRight' | 'offsetTop' | 'enableDelete' | 'isDeletingItem'
+    | 'actions'
+    | 'offsetRight'
+    | 'offsetTop'
+    | 'showDeleteButton'
+    | 'isDeletingItem'
+    | 'disableDeleteButton'
   > {
   handleDeleteDialogOpen: () => void
   handleClosePopover: () => void

packages/components/modules/__shared__/web/ActionsOverlay/__storybook__/ActionsOverlay.mdx

@@ -19,9 +19,10 @@ import { Meta } from '@storybook/addon-docs'
 - **actions** (OverlayAction[]): The list of actions desired for the child component. Note that to implement a delete action, the component provides a enabler, loading and click handler props specifically for that action (see props below).
 - **title** (string): Title for the child component (currently only used on the delete dialog).
 - **children** (ReactNode): The child component to be wrapped.
-- **enableDelete** (boolean): Enables the delete action inside the tooltip/swippable drawer.
+- **showDeleteButton** (boolean): Renders the delete action inside the tooltip/swippable drawer.
 - **isDeletingItem** (boolean): Mutation loading state for the delete action.
 - **handleDeleteItem** (function): Callback function to handle deletion.
+- **disableDeleteButton** (function): Disables the delete button.
 - **offsetTop** (number): Number to offset the top positioning of the default tooltip position (only affects tooltip).
 - **offsetRight** (number): Number to offset the right positioning of the default tooltip position (only affects tooltip).
 - **ContainerProps** (BoxProps): Props for the parent `Box` component that wraps the child component.
@@ -45,7 +46,7 @@ export const DefaultActionsOverlay = (
   return (
     <ActionsOverlay
       title='Button',
-      enableDelete={true}
+      showDeleteButton={true}
       handleDeleteItem={() => {}}
       actions={[
         {

packages/components/modules/__shared__/web/ActionsOverlay/__storybook__/stories.tsx

@@ -19,7 +19,7 @@ export const DefaultActionsOverlay: Story = {
   name: 'ActionsOverlay',
   args: {
     title: 'Button',
-    enableDelete: true,
+    showDeleteButton: true,
     handleDeleteItem: () => {},
     offsetRight: 0,
     offsetTop: 0,
@@ -42,7 +42,7 @@ export const ActionsOverlayWithThreeDotsMenu: Story = {
   name: 'ActionsOverlay with ThreeDotsMenu',
   args: {
     title: 'Button',
-    enableDelete: true,
+    showDeleteButton: true,
     isDeletingItem: false,
     handleDeleteItem: () => {},
     ContainerProps: {

packages/components/modules/__shared__/web/ActionsOverlay/index.tsx

@@ -22,13 +22,15 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
       actions = [],
       children,
       title = 'Item',
-      enableDelete = false,
+      showDeleteButton = false,
       isDeletingItem = false,
+      disableDeleteButton = false,
       handleDeleteItem = () => {},
       offsetTop = 0,
       offsetRight = 0,
       ContainerProps = {},
       SwipeableDrawerProps = {},
+      DeleteDialogProps = {},
       SwipeableDrawer = DefaultSwipeableDrawer,
       hoverOverlayMode = HOVER_OVERLAY_MODES.default,
     },
@@ -110,6 +112,7 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
         }
         onClose={handleDeleteDialogClose}
         open={isDeleteDialogOpen}
+        {...DeleteDialogProps}
       />
     )
 
@@ -128,7 +131,7 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
             aria-label="actions overlay"
             {...SwipeableDrawerProps}
           >
-            <Box display="grid" gridTemplateColumns="1fr" justifySelf="start" gap={1}>
+            <Box display="grid" gridTemplateColumns="1fr" justifySelf="start" gap={1} width="100%">
               {actions?.map(({ label, icon, onClick, disabled, hasPermission, closeOnClick }) => {
                 if (!hasPermission) return null
 
@@ -158,21 +161,26 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
                   </IconButton>
                 )
               })}
-              {enableDelete && (
+              {showDeleteButton && (
                 <>
                   <Divider />
                   <IconButton
                     onClick={handleDeleteDialogOpen}
-                    disabled={isDeletingItem}
+                    disabled={isDeletingItem || disableDeleteButton}
                     sx={{ width: 'fit-content' }}
                     aria-label="delete item"
                   >
                     <IconButtonContentContainer>
                       <Box display="grid" justifySelf="center" height="min-content">
-                        <TrashCanIcon />
+                        <TrashCanIcon
+                          sx={{ color: disableDeleteButton ? 'text.disabled' : 'error.main' }}
+                        />
                       </Box>
-                      <Typography variant="body2" color="error.main">
-                        {`Delete ${title}`}
+                      <Typography
+                        variant="body2"
+                        color={disableDeleteButton ? 'text.disabled' : 'error.main'}
+                      >
+                        Delete
                       </Typography>
                     </IconButtonContentContainer>
                   </IconButton>
@@ -190,8 +198,9 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
               {...{
                 offsetRight,
                 offsetTop,
-                enableDelete,
+                showDeleteButton,
                 isDeletingItem,
+                disableDeleteButton,
                 handleDeleteDialogOpen,
                 actions,
                 handleLongPressItemOptionsClose,
@@ -206,8 +215,9 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
               {...{
                 offsetRight,
                 offsetTop,
-                enableDelete,
+                showDeleteButton,
                 isDeletingItem,
+                disableDeleteButton,
                 handleDeleteDialogOpen,
                 actions,
                 handleClosePopover,

packages/components/modules/__shared__/web/ActionsOverlay/types.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 
-import type { SwipeableDrawerProps } from '@baseapp-frontend/design-system/components/web/drawers'
+import { ConfirmDialogProps } from '@baseapp-frontend/design-system/components/web/dialogs'
+import { SwipeableDrawerProps } from '@baseapp-frontend/design-system/components/web/drawers'
 import { ValueOf } from '@baseapp-frontend/utils'
 
 import { BoxProps } from '@mui/material'
@@ -24,10 +25,12 @@ export type LongPressHandler = {
 export interface ActionOverlayProps extends ActionOverlayTooltipContainerProps {
   actions: OverlayAction[]
   title: string
-  enableDelete?: boolean | null
+  showDeleteButton?: boolean | null
   isDeletingItem?: boolean
+  disableDeleteButton?: boolean
   handleDeleteItem?: () => void
   ContainerProps?: Partial<BoxProps>
+  DeleteDialogProps?: Partial<ConfirmDialogProps>
   SwipeableDrawer?: FC<SwipeableDrawerProps>
   SwipeableDrawerProps?: Partial<SwipeableDrawerProps>
   hoverOverlayMode?: ValueOf<typeof HOVER_OVERLAY_MODES>

packages/components/modules/comments/web/CommentItem/index.tsx

@@ -127,7 +127,7 @@ const CommentItem: FC<CommentItemProps> = ({
       <CommentContainerWrapper currentThreadDepth={currentThreadDepth}>
         <ActionsOverlay
           actions={actions}
-          enableDelete={enableDelete && comment.canDelete}
+          showDeleteButton={enableDelete && comment.canDelete}
           handleDeleteItem={handleDeleteComment}
           isDeletingItem={isDeletingComment}
           title="Comment"

packages/components/modules/messages/common/graphql/fragments/MessageItem.ts

@@ -5,6 +5,7 @@ export const MessageItemFragment = graphql`
     id
     content
     created
+    deleted
     extraData
     inReplyTo {
       id

packages/components/modules/messages/common/graphql/mutations/MessageDelete.ts

@@ -0,0 +1,50 @@
+import { useNotification } from '@baseapp-frontend/utils'
+
+import { Disposable, UseMutationConfig, graphql, useMutation } from 'react-relay'
+
+import { MessageDeleteMutation } from '../../../../../__generated__/MessageDeleteMutation.graphql'
+
+export const MessageDeleteMutationQuery = graphql`
+  mutation MessageDeleteMutation($input: ChatRoomDeleteMessageInput!) {
+    chatRoomDeleteMessage(input: $input) {
+      deletedMessage {
+        node {
+          id
+          ...MessageItemFragment
+        }
+      }
+      errors {
+        field
+        messages
+      }
+    }
+  }
+`
+
+export const useMessageDeleteMutation = (): [
+  (config: UseMutationConfig<MessageDeleteMutation>) => Disposable,
+  boolean,
+] => {
+  const { sendToast } = useNotification()
+  const [commitMutation, isMutationInFlight] = useMutation<MessageDeleteMutation>(
+    MessageDeleteMutationQuery,
+  )
+
+  const commit = (config: UseMutationConfig<MessageDeleteMutation>) =>
+    commitMutation({
+      ...config,
+      onCompleted: (response, errors) => {
+        errors?.forEach((error) => {
+          sendToast(error.message, { type: 'error' })
+        })
+
+        config?.onCompleted?.(response, errors)
+      },
+      onError: (error) => {
+        sendToast(error.message, { type: 'error' })
+        config?.onError?.(error)
+      },
+    })
+
+  return [commit, isMutationInFlight]
+}

packages/components/modules/messages/common/graphql/subscriptions/useMessagesListSubscription.tsx

@@ -4,7 +4,7 @@ import { ConnectionHandler, graphql, useSubscription } from 'react-relay'
 
 export const newMessageSubscription = graphql`
   subscription useMessagesListSubscription($roomId: ID!, $connections: [ID!]!) {
-    chatRoomOnNewMessage(roomId: $roomId) {
+    chatRoomOnMessage(roomId: $roomId) {
       message @prependEdge(connections: $connections) {
         node {
           ...MessageItemFragment

packages/components/modules/messages/common/index.ts

@@ -7,6 +7,8 @@ export { default as withChatRoomProvider } from './context/withChatRoomProvider'
 
 export * from './graphql/mutations/ArchiveChatRoom'
 export * from './graphql/mutations/CreateChatRoom'
+export * from './graphql/mutations/MessageDelete'
+export * from './graphql/mutations/MessageUpdate'
 export * from './graphql/mutations/ReadMessages'
 export * from './graphql/mutations/SendMessage'
 export * from './graphql/mutations/UnreadChat'

packages/components/modules/messages/web/ChatRoomsList/ChatRoomItem/index.tsx

@@ -107,7 +107,7 @@ const ChatRoomItem: FC<ChatRoomItemProps> = ({
           closeOnClick: true,
         },
       ]}
-      enableDelete
+      showDeleteButton
       handleDeleteItem={() => {}}
       isDeletingItem={false}
       ref={chatCardRef}