show delete submenu only when there is more than 1 delete option (#461)

* show delete submenu only when there is more than 1 delete option * Simplified expression to use ternary
tarasglek · Feb 16, 2024 · 2208ad2 · 2208ad2
1 parent 704f56f
commit 2208ad2
Showing 1 changed file with 35 additions and 17 deletions.
diff --git a/src/components/Message/MessageBase.tsx b/src/components/Message/MessageBase.tsx
@@ -416,15 +416,8 @@ function MessageBase({
                 )}
 
                 {shouldShowDeleteMenu && (
-                  <SubMenu label="Delete" className="delete-button">
-                    {onDeleteBeforeClick && (
-                      <MenuItem
-                        label="Delete Messages Before"
-                        onClick={onDeleteBeforeClick}
-                        className="delete-button"
-                      />
-                    )}
-                    {onDeleteClick && (
+                  <>
+                    {onDeleteClick && !onDeleteBeforeClick && !onDeleteAfterClick ? (
                       <MenuItem
                         label="Delete Message"
                         onClick={onDeleteClick}
@@ -438,15 +431,40 @@ function MessageBase({
                           />
                         }
                       />
+                    ) : (
+                      <SubMenu label="Delete" className="delete-button">
+                        {onDeleteBeforeClick && (
+                          <MenuItem
+                            label="Delete Messages Before"
+                            onClick={onDeleteBeforeClick}
+                            className="delete-button"
+                          />
+                        )}
+                        {onDeleteClick && (
+                          <MenuItem
+                            label="Delete Message"
+                            onClick={onDeleteClick}
+                            className="delete-button"
+                            icon={
+                              <IconButton
+                                variant="ghost"
+                                icon={<TbTrash color="red" />}
+                                aria-label="Delete message"
+                                title="Delete message"
+                              />
+                            }
+                          />
+                        )}
+                        {onDeleteAfterClick && (
+                          <MenuItem
+                            label="Delete Messages After"
+                            onClick={onDeleteAfterClick}
+                            className="delete-button"
+                          />
+                        )}
+                      </SubMenu>
                     )}
-                    {onDeleteAfterClick && (
-                      <MenuItem
-                        label="Delete Messages After"
-                        onClick={onDeleteAfterClick}
-                        className="delete-button"
-                      />
-                    )}
-                  </SubMenu>
+                  </>
                 )}
               </Menu>
             </Flex>