Merge pull request klembot#1071 from klembot/fix-delete-prompt

Keep story name visible in prompt after deleting

src/components/control/__tests__/confirm-button.test.tsx

@@ -47,7 +47,7 @@ describe('<ConfirmButton>', () => {
 		).not.toBeInTheDocument();
 	});
 
-	it('calls the onConfirm prop when the confirm button is clicked', async () => {
+	it('hides confirmation and cancel buttons and calls the onConfirm prop when the confirm button is clicked', async () => {
 		const onConfirm = jest.fn();
 
 		renderComponent({
@@ -59,6 +59,12 @@ describe('<ConfirmButton>', () => {
 		expect(onConfirm).not.toHaveBeenCalled();
 		fireEvent.click(screen.getByRole('button', {name: 'test-confirm'}));
 		expect(onConfirm).toBeCalledTimes(1);
+		expect(
+			screen.queryByRole('button', {name: 'test-cancel'})
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', {name: 'test-confirm'})
+		).not.toBeInTheDocument();
 	});
 
 	it('is accessible', async () => {

src/components/control/confirm-button.tsx

@@ -32,6 +32,11 @@ export const ConfirmButton: React.FC<ConfirmButtonProps> = props => {
 	const [open, setOpen] = React.useState(false);
 	const {t} = useTranslation();
 
+	function handleConfirm() {
+		setOpen(false);
+		onConfirm();
+	}
+
 	return (
 		<span className="confirm-button">
 			<CardButton onChangeOpen={setOpen} open={open} {...other}>
@@ -40,7 +45,7 @@ export const ConfirmButton: React.FC<ConfirmButtonProps> = props => {
 					<IconButton
 						icon={confirmIcon ?? <IconCheck />}
 						label={confirmLabel ?? t('common.ok')}
-						onClick={onConfirm}
+						onClick={handleConfirm}
 						variant={confirmVariant ?? 'primary'}
 					/>
 					<IconButton

src/routes/story-list/toolbar/story/__tests__/delete-story-button.test.tsx

@@ -2,11 +2,7 @@ import {act, fireEvent, render, screen} from '@testing-library/react';
 import {axe} from 'jest-axe';
 import * as React from 'react';
 import {useStoriesContext} from '../../../../../store/stories';
-import {
-	FakeStateProvider,
-	fakeStory,
-	StoryInspector
-} from '../../../../../test-util';
+import {FakeStateProvider, StoryInspector} from '../../../../../test-util';
 import {isElectronRenderer} from '../../../../../util/is-electron';
 import {
 	DeleteStoryButton,
@@ -24,7 +20,7 @@ const TestDeleteStoryButton: React.FC<DeleteStoryButtonProps> = props => {
 describe('<DeleteStoryButton>', () => {
 	const isElectronRendererMock = isElectronRenderer as jest.Mock;
 
-	async function renderComponent(props?: Partial<DeleteStoryButtonProps>) {
+	async function renderComponent() {
 		const result = render(
 			<FakeStateProvider>
 				<TestDeleteStoryButton />

src/routes/story-list/toolbar/story/delete-story-button.tsx

@@ -12,9 +12,18 @@ export interface DeleteStoryButtonProps {
 export const DeleteStoryButton: React.FC<DeleteStoryButtonProps> = ({
 	story
 }) => {
+	// We need to store a local copy of the story name so that after it's deleted,
+	// the prompt doesn't change as it transitions out.
+	const [storyName, setStoryName] = React.useState(story?.name);
 	const {dispatch} = useStoriesContext();
 	const {t} = useTranslation();
 
+	React.useEffect(() => {
+		if (story?.name) {
+			setStoryName(story.name);
+		}
+	}, [story?.name]);
+
 	return (
 		<ConfirmButton
 			confirmIcon={<IconTrash />}
@@ -28,7 +37,7 @@ export const DeleteStoryButton: React.FC<DeleteStoryButtonProps> = ({
 				`routes.storyList.toolbar.deleteStoryButton.warning.${
 					isElectronRenderer() ? 'electron' : 'web'
 				}`,
-				{storyName: story?.name}
+				{storyName}
 			)}
 		/>
 	);