feat: delete chat room messages

Author: pt-tsl

packages/components/CHANGELOG.md

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

packages/components/__generated__/MessageDeleteMutation.graphql.ts

@@ -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/index.tsx

@@ -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/DefaultHoverOverlay/types.ts

@@ -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/index.tsx

@@ -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/ThreeDotsMenuHoverOverlay/types.ts

@@ -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={[
         {