fix: Fixes indentified with E2E tests (#1187)

* fix: Removed duplicated button for chapter * fix: Handle delete success for stroy map list delete
techmatters · Sep 25, 2023 · 52220b5 · 52220b5
1 parent 7bcd1ef
commit 52220b5
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 26 deletions.
diff --git a/src/storyMap/components/StoryMapForm/ChaptersSideBar.js b/src/storyMap/components/StoryMapForm/ChaptersSideBar.js
@@ -53,8 +53,15 @@ const DragIcon = withProps(Box, {
 
 const SideBarItem = props => {
   const { t } = useTranslation();
-  const { item, onDelete, onMoveDown, onMoveUp, chaptersLength, isDragging } =
-    props;
+  const {
+    item,
+    onDelete,
+    onMoveDown,
+    onMoveUp,
+    chaptersLength,
+    draggableProps,
+    isDragging,
+  } = props;
   const [menuAnchorEl, setMenuAnchorEl] = useState(null);
   const openMenu = useMemo(() => Boolean(menuAnchorEl), [menuAnchorEl]);
 
@@ -124,7 +131,15 @@ const SideBarItem = props => {
   }, [handleMoveDown, handleMoveUp, item.index, chaptersLength, t]);
 
   return (
-    <>
+    <ListItem
+      key={item.id}
+      ref={draggableProps?.innerRef}
+      sx={{
+        p: 0,
+        boxShadow: isDragging ? '0px 2px 4px 0px rgba(0, 0, 0, 0.25)' : 'none',
+      }}
+      {...draggableProps?.draggableProps}
+    >
       <Button
         component="a"
         {...(item.active ? { 'aria-current': 'step' } : {})}
@@ -143,6 +158,10 @@ const SideBarItem = props => {
               })
             : item.label
         }
+        {...draggableProps?.dragHandleProps}
+        style={{
+          cursor: 'pointer',
+        }}
       >
         <Grid container>
           <Grid
@@ -249,7 +268,7 @@ const SideBarItem = props => {
           </Grid>
         </Grid>
       </Button>
-    </>
+    </ListItem>
   );
 };
 
@@ -354,27 +373,15 @@ const ChaptersSidebar = props => {
               {chapterItems.map((item, index) => (
                 <Draggable key={item.id} draggableId={item.id} index={index}>
                   {(provided, snapshot) => (
-                    <ListItem
-                      key={item.id}
-                      ref={provided.innerRef}
-                      sx={{
-                        p: 0,
-                        boxShadow: snapshot.isDragging
-                          ? '0px 2px 4px 0px rgba(0, 0, 0, 0.25)'
-                          : 'none',
-                      }}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                    >
-                      <SideBarItem
-                        item={item}
-                        onDelete={onDelete}
-                        onMoveDown={onMoveChapterDown}
-                        onMoveUp={onMoveChapterUp}
-                        chaptersLength={chapters.length}
-                        isDragging={snapshot.isDragging}
-                      />
-                    </ListItem>
+                    <SideBarItem
+                      item={item}
+                      onDelete={onDelete}
+                      onMoveDown={onMoveChapterDown}
+                      onMoveUp={onMoveChapterUp}
+                      chaptersLength={chapters.length}
+                      isDragging={snapshot.isDragging}
+                      draggableProps={provided}
+                    />
                   )}
                 </Draggable>
               ))}

diff --git a/src/storyMap/components/StoryMapsCard.js b/src/storyMap/components/StoryMapsCard.js
@@ -41,7 +41,7 @@ import RouterLink from 'common/components/RouterLink';
 import { formatDate } from 'localization/utils';
 import Restricted from 'permissions/components/Restricted';
 import HomeCard from 'home/components/HomeCard';
-import { approveMembership } from 'storyMap/storyMapSlice';
+import { approveMembership, removeUserStoryMap } from 'storyMap/storyMapSlice';
 import {
   generateStoryMapEditUrl,
   generateStoryMapUrl,
@@ -110,6 +110,10 @@ const StoryMapListItem = props => {
     });
   }, [dispatch, navigate, storyMap, accountMembership]);
 
+  const onDeleteSuccess = useCallback(() => {
+    dispatch(removeUserStoryMap(storyMap.id));
+  }, [dispatch, storyMap.id]);
+
   return (
     <ListItem
       component={GridListItem}
@@ -212,6 +216,7 @@ const StoryMapListItem = props => {
             <DeleteButton
               storyMap={storyMap}
               tooltip={t('storyMap.delete_label')}
+              onSuccess={onDeleteSuccess}
             >
               <DeleteIcon
                 sx={{