Add List view for apps as default

packages/toolpad-app/src/components/EditableText.tsx

@@ -1,39 +1,150 @@
 import * as React from 'react';
-import { Skeleton, TextField, Typography, TypographyVariant, Tooltip } from '@mui/material';
+import { TextField, Theme, TypographyVariant, SxProps } from '@mui/material';
 
 interface EditableTextProps {
   defaultValue?: string;
-  loading: boolean;
-  editing: boolean;
-  isError: boolean;
-  errorText?: string;
-  onKeyUp: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
-  variant?: TypographyVariant;
+  disabled?: boolean;
+  editable?: boolean;
+  helperText?: React.ReactNode;
+  error?: boolean;
+  onChange?: (newValue: string) => void;
+  onSave?: (newValue: string) => void;
+  onClose?: () => void;
   size?: 'small' | 'medium';
+  sx?: SxProps;
+  value?: string;
+  variant?: TypographyVariant;
 }
 
 const EditableText = React.forwardRef<HTMLInputElement, EditableTextProps>(
-  ({ defaultValue, onKeyUp, onBlur, variant, size, editing, loading, isError, errorText }, ref) => {
-    return editing ? (
+  (
+    {
+      defaultValue,
+      disabled,
+      editable,
+      helperText,
+      error,
+      onChange,
+      onClose,
+      onSave,
+      size,
+      sx,
+      value,
+      variant: typographyVariant = 'body1',
+    },
+    ref,
+  ) => {
+    const appTitleInput = React.useRef<HTMLInputElement | null>(null);
+
+    React.useEffect(() => {
+      let inputElement: HTMLInputElement | null = appTitleInput.current;
+      if (ref) {
+        inputElement = (ref as React.MutableRefObject<HTMLInputElement>).current;
+      }
+      if (inputElement) {
+        if (editable) {
+          inputElement.focus();
+          inputElement.select();
+        } else {
+          inputElement.blur();
+        }
+      }
+    }, [ref, editable]);
+
+    const handleBlur = React.useCallback(
+      (event: React.FocusEvent<HTMLInputElement>) => {
+        // This is only triggered on a click away
+        if (onClose) {
+          onClose();
+        }
+        if (onSave && event.target) {
+          onSave(event.target.value);
+        }
+      },
+      [onClose, onSave],
+    );
+
+    const handleChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+          onChange(event.target.value);
+        }
+      },
+      [onChange],
+    );
+
+    const handleInput = React.useCallback(
+      (event: React.KeyboardEvent<HTMLInputElement>) => {
+        let inputElement: HTMLInputElement | null = appTitleInput.current;
+        if (ref) {
+          inputElement = (ref as React.MutableRefObject<HTMLInputElement>).current;
+        }
+        if (inputElement) {
+          if (event.key === 'Escape') {
+            if (defaultValue) {
+              if (onChange) {
+                onChange(defaultValue);
+              }
+            }
+            if (onClose) {
+              onClose();
+            }
+            return;
+          }
+          if (event.key === 'Enter') {
+            if (onClose) {
+              onClose();
+            }
+            if (onSave) {
+              onSave((event.target as HTMLInputElement).value);
+            }
+          }
+        }
+      },
+      [defaultValue, onChange, onSave, onClose, ref],
+    );
+
+    return (
       <TextField
-        variant={'standard'}
+        // `disabled` prop overrides `editable` prop
+        disabled={disabled || !editable}
+        error={error}
+        helperText={helperText}
+        inputRef={ref ?? appTitleInput}
+        inputProps={{
+          tabIndex: editable ? 0 : -1,
+          'aria-readonly': !editable,
+          sx: (theme: Theme) => ({
+            // Handle overflow
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            fontSize: theme.typography[typographyVariant].fontSize,
+            height: theme.typography[typographyVariant].fontSize,
+          }),
+        }}
+        onKeyUp={handleInput}
+        onBlur={handleBlur}
+        onChange={handleChange}
         size={size ?? 'small'}
-        inputRef={ref}
-        sx={{ paddingBottom: '4px' }}
-        InputProps={{ sx: { fontSize: '1.5rem', height: '1.5em' } }}
-        onKeyUp={onKeyUp ?? (() => {})}
-        onBlur={onBlur ?? (() => {})}
-        defaultValue={defaultValue}
-        error={isError}
-        helperText={isError ? errorText : ''}
+        sx={{
+          ...sx,
+          '& .MuiInputBase-root.MuiInput-root:before, .MuiInput-root.MuiInputBase-root:not(.Mui-disabled):hover::before':
+            {
+              borderBottom: editable ? `initial` : 'none',
+            },
+          // TextField must not appear disabled if disabled state is controlled by `editable` prop
+          '& .MuiInput-root.MuiInputBase-root.Mui-disabled, .MuiInput-input.MuiInputBase-input.Mui-disabled, .MuiInput-root.MuiFormHelperText-root.Mui-disabled':
+            disabled
+              ? null
+              : {
+                  WebkitTextFillColor: 'unset',
+                  color: 'unset',
+                },
+        }}
+        value={value}
+        variant={'standard'}
       />
-    ) : (
-      <Tooltip title={defaultValue || ''} enterDelay={500}>
-        <Typography gutterBottom variant={variant ?? 'body1'} component="div" noWrap>
-          {loading ? <Skeleton /> : defaultValue}
-        </Typography>
-      </Tooltip>
     );
   },
 );