Fix App renaming not working (#816)

Fix rename failing
mui · Aug 18, 2022 · b5d4fba · b5d4fba
1 parent 23ceebb
commit b5d4fba
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/packages/toolpad-app/src/server/data.ts b/packages/toolpad-app/src/server/data.ts
@@ -218,7 +218,10 @@ export async function updateApp(appId: string, name: string): Promise<void> {
       id: appId,
     },
     data: { name },
-    select: {},
+    select: {
+      // Only return the id to reduce amount of data returned from the db
+      id: true,
+    },
   });
 }
 

diff --git a/packages/toolpad-app/src/toolpad/Home.tsx b/packages/toolpad-app/src/toolpad/Home.tsx
@@ -167,25 +167,24 @@ interface AppNameEditableProps {
   editing?: boolean;
   setEditing: (editing: boolean) => void;
   loading?: boolean;
-  description?: React.ReactNode;
 }
 
-function AppNameEditable({ app, editing, setEditing, loading, description }: AppNameEditableProps) {
-  const [showAppRenameError, setShowAppRenameError] = React.useState<boolean>(false);
+function AppNameEditable({ app, editing, setEditing, loading }: AppNameEditableProps) {
+  const [appRenameError, setAppRenameError] = React.useState<Error | null>(null);
   const appNameInput = React.useRef<HTMLInputElement | null>(null);
   const [appName, setAppName] = React.useState<string>(app?.name || '');
 
   const handleAppNameChange = React.useCallback(
     (newValue: string) => {
-      setShowAppRenameError(false);
+      setAppRenameError(null);
       setAppName(newValue);
     },
     [setAppName],
   );
 
   const handleAppRenameClose = React.useCallback(() => {
     setEditing(false);
-    setShowAppRenameError(false);
+    setAppRenameError(null);
   }, [setEditing]);
 
   const handleAppRenameSave = React.useCallback(
@@ -194,8 +193,8 @@ function AppNameEditable({ app, editing, setEditing, loading, description }: App
         try {
           await client.mutation.updateApp(app.id, name);
           await client.invalidateQueries('getApps');
-        } catch (err) {
-          setShowAppRenameError(true);
+        } catch (err: any) {
+          setAppRenameError(err);
           setEditing(true);
         }
       }
@@ -209,8 +208,8 @@ function AppNameEditable({ app, editing, setEditing, loading, description }: App
     <EditableText
       defaultValue={app?.name}
       editable={editing}
-      helperText={showAppRenameError ? `An app named "${appName}" already exists` : description}
-      error={showAppRenameError}
+      helperText={appRenameError ? `An app named "${appName}" already exists` : null}
+      error={!!appRenameError}
       onChange={handleAppNameChange}
       onClose={handleAppRenameClose}
       onSave={handleAppRenameSave}
@@ -450,8 +449,10 @@ function AppRow({ app, activeDeployment, onDelete }: AppRowProps) {
             app={app}
             editing={editingName}
             setEditing={setEditingName}
-            description={app ? `Edited ${getReadableDuration(app.editedAt)}` : <Skeleton />}
           />
+          <Typography variant="caption">
+            {app ? `Edited ${getReadableDuration(app.editedAt)}` : <Skeleton />}
+          </Typography>
         </TableCell>
         <TableCell align="right">
           <Stack direction="row" spacing={1} justifyContent={'flex-end'}>