🐛(lib-video) fixed memory leak when we remove a thumbnail

When we removed a thumbnail, a memory leak was created with the confirmation modal. This modal was not unmounted correctly.
openfun · Mar 17, 2023 · 4e68ed2 · 4e68ed2
1 parent f23a717
commit 4e68ed2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/...s/common/VideoWidgetProvider/widgets/WidgetThumbnail/ThumbnailRemoveButton/index.spec.tsx b/...s/common/VideoWidgetProvider/widgets/WidgetThumbnail/ThumbnailRemoveButton/index.spec.tsx
@@ -29,8 +29,22 @@ describe('<ThumbnailRemoveButton />', () => {
     fetchMock.restore();
   });
 
+  it('checks remove button is not displayed', () => {
+    const mockedThumbnail = thumbnailMockFactory({
+      is_ready_to_show: false,
+    });
+
+    render(<ThumbnailRemoveButton thumbnail={mockedThumbnail} />);
+
+    expect(
+      screen.queryByRole('button', { name: 'Delete thumbnail' }),
+    ).not.toBeInTheDocument();
+  });
+
   it('clicks on the remove button and removal is successful', async () => {
-    const mockedThumbnail = thumbnailMockFactory();
+    const mockedThumbnail = thumbnailMockFactory({
+      is_ready_to_show: true,
+    });
     useThumbnail.getState().addResource(mockedThumbnail);
 
     fetchMock.delete(`/api/thumbnails/${mockedThumbnail.id}/`, 204);
@@ -70,7 +84,9 @@ describe('<ThumbnailRemoveButton />', () => {
   });
 
   it('clicks on the remove button and removal fails', async () => {
-    const mockedThumbnail = thumbnailMockFactory();
+    const mockedThumbnail = thumbnailMockFactory({
+      is_ready_to_show: true,
+    });
     useThumbnail.getState().addResource(mockedThumbnail);
 
     fetchMock.delete(`/api/thumbnails/${mockedThumbnail.id}/`, 500);

diff --git a/...onents/common/VideoWidgetProvider/widgets/WidgetThumbnail/ThumbnailRemoveButton/index.tsx b/...onents/common/VideoWidgetProvider/widgets/WidgetThumbnail/ThumbnailRemoveButton/index.tsx
@@ -89,14 +89,16 @@ export const ThumbnailRemoveButton = ({
           }}
         />
       )}
-      <Button
-        a11yTitle={intl.formatMessage(messages.deleteButtonLabel)}
-        icon={<BinSVG width="14px" height="18px" iconColor="blue-active" />}
-        onClick={() => setShowDeleteConfirmationModal(true)}
-        plain
-        title={intl.formatMessage(messages.deleteButtonLabel)}
-        margin="small"
-      />
+      {thumbnail && thumbnail.is_ready_to_show && (
+        <Button
+          a11yTitle={intl.formatMessage(messages.deleteButtonLabel)}
+          icon={<BinSVG width="14px" height="18px" iconColor="blue-active" />}
+          onClick={() => setShowDeleteConfirmationModal(true)}
+          plain
+          title={intl.formatMessage(messages.deleteButtonLabel)}
+          margin="small"
+        />
+      )}
     </React.Fragment>
   );
 };
diff --git a/...ges/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.tsx b/...ges/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.tsx
@@ -163,9 +163,7 @@ export const WidgetThumbnail = ({ isLive = true }: WidgetThumbnailProps) => {
                 uploadManagerState={uploadManagerState}
               />
             </Box>
-            {thumbnail && thumbnail.is_ready_to_show && (
-              <ThumbnailRemoveButton thumbnail={thumbnail} />
-            )}
+            <ThumbnailRemoveButton thumbnail={thumbnail} />
           </Stack>
         )}