Don't render EditDialog when not editing

Fixes a bug where the state for the form fields wasn't being populated
by the initial values coming from props.

As the form was always rendered, regardless of whether anything was
currently being edited, the initial values coming from the props and
passed to the `useState` calls were empty. Then when a particular
section was selected, these props changed to reflect the data from that
section. However, `useState` only uses the initial values from the
*first render*, so it was ignoring these updated props, and retaining
the empty values.

The solution is not to render the form while nothing is being edited,
and then render it when a section is selected for editing. That way each
time a section is selected for editing, the form is considered a new
addition to the tree, and therefore the initial data coming from props
on the "first render" is the section data.

Author: JamieB-gu

dotcom-rendering/src/admin/appsNavTool/EditDialog.stories.tsx

@@ -24,16 +24,20 @@ export const EditDialog = (props: Props) => {
 		dispatch({ kind: 'cancelEdit' });
 	}, [dispatch]);
 
+	if (props.editing === undefined) {
+		return null;
+	}
+
 	return (
 		<SectionForm
 			heading="Edit Section"
-			open={props.editing !== undefined}
-			initialTitle={props.editing?.title ?? ''}
+			open={true}
+			initialTitle={props.editing.title}
 			initialPath={new URL(
-				props.editing?.path ?? '',
+				props.editing.path,
 				'https://www.theguardian.com',
 			).toString()}
-			initialMobileOverride={props.editing?.mobileOverride}
+			initialMobileOverride={props.editing.mobileOverride}
 			submit={submit}
 			cancel={cancel}
 		/>