History

Refine source delete confirmation UI (#258)

Hide the Edit action while the source delete confirmation state is active, remove the extra confirmation label, and make the destructive button label explicit as Delete Source. Also reset the confirmation state when the source route changes so stale delete state does not carry across page navigation.

Christian Glassiognon committed 6 months ago

Commit 89650ea1 parent 6e559bc1 file · +7 −4Browse files

Unified · Split

packages/react/src/pages/source-detail.tsx+7−4
@@ -55,6 +55,10 @@ export function SourceDetailPage(props: { namespace: string }) { · 54 unmodified lines
55 const [refreshing, setRefreshing] = useState(false);55 const [refreshing, setRefreshing] = useState(false);
56 const [editing, setEditing] = useState(false);56 const [editing, setEditing] = useState(false);
57 57
58 useEffect(() => {
59 setConfirmDelete(false);
60 }, [namespace]);
61
58 const sourceData = AsyncResult.isSuccess(source) ? source.value : null;62 const sourceData = AsyncResult.isSuccess(source) ? source.value : null;
59 const canRefresh = sourceData ? (sourceData.canRefresh ?? true) : false;63 const canRefresh = sourceData ? (sourceData.canRefresh ?? true) : false;
60 const canRemove = sourceData ? (sourceData.canRemove ?? true) : false;64 const canRemove = sourceData ? (sourceData.canRemove ?? true) : false;
@@ -161,13 +165,13 @@ export function SourceDetailPage(props: { namespace: string }) { · 100 unmodified lines
161 </div>165 </div>
162 166
163 <div className="flex shrink-0 items-center gap-2">167 <div className="flex shrink-0 items-center gap-2">
164 {editPlugin?.signIn && !editing && (168 {editPlugin?.signIn && !editing && !confirmDelete && (
165 <Suspense fallback={null}>169 <Suspense fallback={null}>
166 <editPlugin.signIn sourceId={namespace} />170 <editPlugin.signIn sourceId={namespace} />
167 </Suspense>171 </Suspense>
168 )}172 )}
169 173
170 {canEdit && editPlugin && !editing && (174 {canEdit && editPlugin && !editing && !confirmDelete && (
171 <Button variant="outline" size="sm" onClick={() => setEditing(true)}>175 <Button variant="outline" size="sm" onClick={() => setEditing(true)}>
172 Edit176 Edit
173 </Button>177 </Button>
@@ -194,7 +198,6 @@ export function SourceDetailPage(props: { namespace: string }) { · 20 unmodified lines
194 !editing &&198 !editing &&
195 (confirmDelete ? (199 (confirmDelete ? (
196 <div className="flex items-center gap-2">200 <div className="flex items-center gap-2">
197 <span className="text-xs font-medium text-destructive">Confirm?</span>
198 <Button201 <Button
199 variant="outline"202 variant="outline"
200 size="sm"203 size="sm"
@@ -209,7 +212,7 @@ export function SourceDetailPage(props: { namespace: string }) { · 8 unmodified lines
209 onClick={() => void handleDelete()}212 onClick={() => void handleDelete()}
210 disabled={deleting}213 disabled={deleting}
211 >214 >
212 {deleting ? "Deleting..." : "Delete"}215 {deleting ? "Deleting..." : "Confirm Delete"}
213 </Button>216 </Button>
214 </div>217 </div>
215 ) : (218 ) : (