Merge pull request #1393 from guardian/pf/disable-delete-button-when-processing

Disable delete button when processing, and fix update after upload

Author: bryophyta

public/video-ui/src/components/DeleteButton.jsx

@@ -1,12 +1,14 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import ReactTooltip from 'react-tooltip';
 import Icon from './Icon';
 
 export default class DeleteButton extends React.Component {
   static propTypes = {
     tooltip: PropTypes.string.isRequired,
-    onDelete: PropTypes.func.isRequired
+    onDelete: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    tooltipWhenDisabled: PropTypes.string
   };
 
   state = {
@@ -28,6 +30,7 @@ export default class DeleteButton extends React.Component {
         onClick={this.props.onDelete}
         data-tip="Confirm delete. This cannot be undone."
         data-testid="delete-button"
+        disabled={this.props.disabled}
       >
         <Icon icon="delete_forever">Confirm delete</Icon>
       </button>
@@ -39,8 +42,13 @@ export default class DeleteButton extends React.Component {
       <button
         className="btn button__secondary--remove"
         onClick={() => this.changeState()}
-        data-tip={this.props.tooltip}
+        data-tip={
+          this.props.disabled
+            ? (this.props.tooltipWhenDisabled ?? this.props.tooltip)
+            : this.props.tooltip
+        }
         data-testid="delete-button"
+        disabled={this.props.disabled}
       >
         <Icon icon="delete">Delete</Icon>
       </button>

public/video-ui/src/components/VideoUpload/VideoAsset.test.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import { Asset } from './VideoAsset';
-import { setupStore } from '../../util/setupStore';
-import { setConfig } from '../../slices/config';
+import React from 'react';
 import { Provider } from 'react-redux';
+import type { Video, Asset as VideoAsset } from '../../services/VideosApi';
+import { setConfig } from '../../slices/config';
+import { setVideo } from '../../slices/video';
+import { setupStore } from '../../util/setupStore';
 import { setStore } from '../../util/storeAccessor';
+import { Asset } from './VideoAsset';
 
 const defaultProps = {
   videoId: 'test-video-id',
@@ -19,13 +21,33 @@ const defaultProps = {
   activatingAssetNumber: undefined as number
 };
 
+const defaultVideoAsset: VideoAsset = {
+  version: 1,
+  id: 'AAAAAAAAAAA',
+  assetType: 'Video',
+  mimeType: 'video/youtube',
+  platform: 'Youtube'
+};
+
 const store = setupStore();
 store.dispatch(
   setConfig({
     permissions: {},
     youtubeEmbedUrl: 'https://www.youtube.com/embed/'
   })
 );
+store.dispatch(
+  setVideo({
+    id: 'test-video-id',
+    assets: [
+      {
+        ...defaultVideoAsset,
+        version: 1,
+        id: 'AAAAAAAAAAA'
+      }
+    ]
+  } as Video)
+);
 setStore(store);
 
 describe('VideoAsset', () => {
@@ -78,7 +100,9 @@ describe('VideoAsset', () => {
 
     it('does not show activate button when asset is active', () => {
       render(
-        <Asset {...defaultProps} upload={completedUpload} isActive={true} />
+        <Provider store={store}>
+          <Asset {...defaultProps} upload={completedUpload} isActive={true} />
+        </Provider>
       );
 
       expect(
@@ -88,7 +112,11 @@ describe('VideoAsset', () => {
     });
 
     it('shows delete button when asset is not active', () => {
-      render(<Asset {...defaultProps} upload={completedUpload} />);
+      render(
+        <Provider store={store}>
+          <Asset {...defaultProps} upload={completedUpload} />
+        </Provider>
+      );
 
       const deleteButton = screen.getByTestId('delete-button');
       expect(deleteButton).toBeInTheDocument();
@@ -112,8 +140,12 @@ describe('VideoAsset', () => {
       }
     };
 
-    it('renders processing asset with activate button disabled', () => {
-      render(<Asset {...defaultProps} upload={processingUpload} />);
+    it('renders processing asset with activate and delete buttons disabled', () => {
+      render(
+        <Provider store={store}>
+          <Asset {...defaultProps} upload={processingUpload} />
+        </Provider>
+      );
 
       // Check that progress bar is shown
       const progress = screen.getByRole('progressbar');
@@ -126,13 +158,24 @@ describe('VideoAsset', () => {
       expect(activateButton).toBeInTheDocument();
       expect(activateButton).toBeDisabled();
 
+      // Check that delete button is present but disabled
+      const deleteButton = screen.getByRole('button', {
+        name: 'delete Delete'
+      });
+      expect(deleteButton).toBeInTheDocument();
+      expect(deleteButton).toBeDisabled();
+
       // Check that processing status is displayed
       expect(screen.getByText('Uploading to YouTube')).toBeInTheDocument();
     });
 
     it('does not call selectAsset when disabled activate button is clicked', async () => {
       const user = userEvent.setup();
-      render(<Asset {...defaultProps} upload={processingUpload} />);
+      render(
+        <Provider store={store}>
+          <Asset {...defaultProps} upload={processingUpload} />
+        </Provider>
+      );
 
       const activateButton = screen.getByRole('button', { name: 'Activate' });
       await user.click(activateButton);
@@ -143,11 +186,13 @@ describe('VideoAsset', () => {
 
     it('shows loading state when asset is currently being activated', () => {
       render(
-        <Asset
-          {...defaultProps}
-          upload={processingUpload}
-          activatingAssetNumber={2}
-        />
+        <Provider store={store}>
+          <Asset
+            {...defaultProps}
+            upload={processingUpload}
+            activatingAssetNumber={2}
+          />
+        </Provider>
       );
 
       const activateButton = screen.getByRole('button', { name: 'Activate' });
@@ -163,7 +208,11 @@ describe('VideoAsset', () => {
         }
       };
 
-      render(<Asset {...defaultProps} upload={failedUpload} />);
+      render(
+        <Provider store={store}>
+          <Asset {...defaultProps} upload={failedUpload} />
+        </Provider>
+      );
 
       expect(screen.getByText('Upload Failed')).toBeInTheDocument();
 
@@ -180,7 +229,11 @@ describe('VideoAsset', () => {
         }
       };
 
-      render(<Asset {...defaultProps} upload={unknownProgressUpload} />);
+      render(
+        <Provider store={store}>
+          <Asset {...defaultProps} upload={unknownProgressUpload} />
+        </Provider>
+      );
 
       // Should show spinner (loader class)
       expect(document.querySelector('.loader')).toBeInTheDocument();
@@ -195,24 +248,34 @@ describe('VideoAsset', () => {
       id: '2',
       asset: {
         sources: [
-          { src: "https://uploads.gu.com/test--264ef95d-ecb0-472e-9030-9e5ef678bf16-2.0.mp4", mimeType: "video/mp4" },
-          { src: "https://uploads.gu.com/test--264ef95d-ecb0-472e-9030-9e5ef678bf16-2.1.m3u8", mimeType: "application/vnd.apple.mpegurl" }
+          {
+            src: 'https://uploads.gu.com/test--264ef95d-ecb0-472e-9030-9e5ef678bf16-2.0.mp4',
+            mimeType: 'video/mp4'
+          },
+          {
+            src: 'https://uploads.gu.com/test--264ef95d-ecb0-472e-9030-9e5ef678bf16-2.1.m3u8',
+            mimeType: 'application/vnd.apple.mpegurl'
+          }
         ]
       },
       processing: {
-        status: "GetTranscodingProgressV2",
+        status: 'GetTranscodingProgressV2',
         failed: false
       },
       metadata: {
         originalFilename: 'Video.mp4',
         startTimestamp: 1759499181730,
-        subtitleFilename: "subtitle.srt",
+        subtitleFilename: 'subtitle.srt',
         user: 'a.person@example.co.uk'
       }
     };
 
     it('renders reprocessing asset with activate button disabled', () => {
-      render(<Asset {...defaultProps} upload={reprocessingUpload} />);
+      render(
+        <Provider store={store}>
+          <Asset {...defaultProps} upload={reprocessingUpload} />
+        </Provider>
+      );
 
       // Should show spinner (loader class)
       expect(document.querySelector('.loader')).toBeInTheDocument();
@@ -228,7 +291,6 @@ describe('VideoAsset', () => {
       // Check that file name is displayed
       expect(screen.getByText('Asset 2 - Video.mp4')).toBeInTheDocument();
     });
-
   });
 
   it('returns null when upload has no asset or processing state', () => {
@@ -240,7 +302,9 @@ describe('VideoAsset', () => {
     };
 
     const { container } = render(
-      <Asset {...defaultProps} upload={emptyUpload} />
+      <Provider store={store}>
+        <Asset {...defaultProps} upload={emptyUpload} />
+      </Provider>
     );
 
     expect(container.firstChild).toBeNull();