🐛Fix replace reference with latest button not working in webview

src/webview-ui/snapshot/SnapshotContainer.svelte

@@ -21,9 +21,18 @@
     latest: `${containerId}-latest`,
     diff: `${containerId}-diff`,
   };
+  let replaceButtonDisabled = false;
 
   const handleReplaceReferenceClick = () => {
     sendWebviewMessage({ intent: 'replaceReferenceWithLatest', locale, formFactor });
+    /**
+     * We're just gonna disable the button for a second cause there's no decent way to know when the operation is done
+     * and either way re-requesting the action doesn't really do anything bad.
+     */
+    replaceButtonDisabled = true;
+    setTimeout(() => {
+      replaceButtonDisabled = false;
+    }, 1000);
   };
 </script>
 
@@ -32,7 +41,7 @@
     <h2 class="text-2xl font-medium mr-2.5">{resource.locale} | {resource.formFactor}</h2>
     {#if resource.diff.exists} <DiffBadge /> {/if}
     <button
-      disabled={!resource.diff.exists}
+      disabled={!resource.diff.exists || replaceButtonDisabled}
       class="
         btn ml-auto focus:outline-none
         border-2 rounded border-current

src/webview/WdioWebviewPanel.ts

@@ -211,7 +211,7 @@ class WdioWebviewPanel {
       return;
     }
     const singleResourceSnapshot = new WdioSnapshot(this.webviewSnapshot.name, 'dummyParentId');
-    singleResourceSnapshot.addResource(resourceToUpdate);
+    singleResourceSnapshot.resources = [resourceToUpdate];
     replaceReferenceWithLatest(singleResourceSnapshot);
   }
 }

tests/unit/webview-ui/snapshot/SnapshotContainer.test.ts

@@ -1,5 +1,5 @@
 import * as svelte from 'svelte';
-import { fireEvent, render, screen, within } from '@testing-library/svelte';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/svelte';
 import { mocked } from 'ts-jest/utils';
 
 import SnapshotContainer from '../../../../src/webview-ui/snapshot/SnapshotContainer.svelte';
@@ -119,6 +119,19 @@ describe('SnapshotContainer', () => {
     });
   });
 
+  it('should disable the replace reference with latest button for a second after it is clicked', async () => {
+    const resource = buildResource({ diff: true });
+    jest.useFakeTimers();
+    render(SnapshotContainer, { resource });
+    await fireEvent.click(screen.getByRole('button', { name: 'Replace reference with latest' }));
+    expect(screen.getByRole('button', { name: 'Replace reference with latest' })).toBeDisabled();
+    jest.runTimersToTime(1000);
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Replace reference with latest' })).not.toBeDisabled()
+    );
+    jest.useRealTimers();
+  });
+
   it('should render the replace button as disabled when there is no diff snapshot present', () => {
     render(SnapshotContainer, { resource: buildResource({ diff: false }) });
     expect(screen.getByRole('button', { name: 'Replace reference with latest' })).toBeDisabled();

tests/unit/webview/WdioWebviewPanel.test.ts

@@ -157,7 +157,7 @@ describe('WdioWebviewPanel', () => {
         latest: { uri: Uri.file('latest-snapshot.png'), exists: false },
         diff: { uri: Uri.file('diff-snapshot.png'), exists: false },
       };
-      snapshot.addResource(mockResource);
+      snapshot.resources.push(mockResource);
       WdioWebviewPanel.createOrShow(snapshot);
       const { onDidReceiveMessage } = mockWindow.createWebviewPanel.mock.results[0].value.webview;
       onDidReceiveMessage.mock.calls[0][0]({
@@ -166,11 +166,13 @@ describe('WdioWebviewPanel', () => {
         formFactor: 'formFactor2',
       });
       expect(replaceReferenceWithLatest).toHaveBeenCalledTimes(1);
-      expect(replaceReferenceWithLatest).toHaveBeenCalledWith(
-        expect.objectContaining({
-          resources: [expect.objectContaining({ locale: 'locale2', formFactor: 'formFactor2' })],
-        })
-      );
+      const receivedSnapshot = mocked(replaceReferenceWithLatest).mock.calls[0][0];
+      expect(receivedSnapshot.resources).toHaveLength(1);
+      expect(receivedSnapshot.resources[0].locale).toEqual(mockResource.locale);
+      expect(receivedSnapshot.resources[0].formFactor).toEqual(mockResource.formFactor);
+      expect(receivedSnapshot.resources[0].reference.uri.path).toEqual(mockResource.reference.uri.path);
+      expect(receivedSnapshot.resources[0].latest.uri.path).toEqual(mockResource.latest.uri.path);
+      expect(receivedSnapshot.resources[0].diff.uri.path).toEqual(mockResource.diff.uri.path);
     });
 
     it("should show an error message when the locale and form factor requested for replacement don't exist", () => {