App card enhancements #591
Conversation
|
Your Render PR Server URL is https://toolpad-pr-591.onrender.com. Follow its progress at https://dashboard.render.com/web/srv-capmjuf5f997imo8jbs0. |
oliviertassinari
temporarily deployed
to
app-card-enhance - toolpad-db PR #591
Render
Destroyed
| </DialogActions> | ||
| </DialogForm> | ||
| </Dialog> | ||
| <Snackbar |
There was a problem hiding this comment.
We will only use snackbars when errors happen without context. In this case we can show loading state and error state inline in the dialog, no snackbar needed. The error should be available in createAppMutation.error
| subheader={ | ||
| <Typography variant="body2" color="text.secondary"> | ||
| {app ? `Edited: ${app.editedAt.toLocaleString('short')}` : <Skeleton />} | ||
| {app ? `Edited ${getReadableDuration(app.editedAt)}` : <Skeleton />} |
There was a problem hiding this comment.
We still need to make the absolute time accessible for the users as well. Perhaps using a <time> tag. Or with a Tooltip.
| readableDuration = '1 hour ago'; | ||
| } else if (delta < day) { | ||
| readableDuration = `${Math.floor(delta / hour)} hours ago`; | ||
| } else if (delta < day * 2) { |
There was a problem hiding this comment.
For the specific use case of the apps overview, I think we can stop at "x hours ago". there will be too many duplicates otherwise.
There was a problem hiding this comment.
What would apps created a few days or weeks ago say in that case?
There was a problem hiding this comment.
Something like this?
| /> | ||
| {showAppNameErrorAlert ? ( |
There was a problem hiding this comment.
Would it make sense to use the TextField error state and helperText for this?
| } catch (err) { | ||
| setShowNameErrorAlert(true); | ||
| } catch (error) { | ||
| // Silently catch |
There was a problem hiding this comment.
One way we may be able to avoid this is by running
window.location.href = `/_toolpad/app/${app.id}/editor`;in the onSuccess handler of useMutation and use createAppMutation.mutate([name]); without await instead
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
Fixes App Card: Enhancements/Fixes #534
I have followed (at least) the PR section of the contributing guide.
Adds readable time durations and moves app title to the center of the card (inside a
<CardContent>)Extracts
<EditableText>out as a separate component (using aTextFieldandTypographycomponent together since hard to get a disabledTextFieldto wrap in case of long names)Handles errors when trying to create an app with an existing name