(even more) Dashboard fixes (#7877)

- Fixes display of the assets table in Firefox. Before this fix, the table header grows instead of the table footer. It seems like the correct behavior for tables is to [not be valid flex children](https://stackoverflow.com/a/41421700/3323231), so the correct fix is to add a `flex` wrapper div. - Fixes missing error toast notification when `startup.project` is invalid - Fixes #7589 - Enter (incorrectly) causes projects to be opened when the name is being edited - Gracefully fail when `projectState` is missing from an asset - Avoid opening editor for previously opened project, when `startup.project` is provided - Fixes enso-org/cloud-v2#688 - Fixes CSS for search bar - Fixes enso-org/cloud-v2#689 - Adds "New <X>" entries back to context menus for regular assets - Fixes enso-org/cloud-v2#692 - Fix `z-index` of top left (page switcher) icons - Fixes enso-org/cloud-v2#693 - Fix restoring local projects after closing and reopening - Adds blur to top right menu bars for extra visibility # Important Notes Testing should test Firefox and Chrome (testing on Safari is optional) to make sure the following is working correctly: - The table looks normal - The context menu still triggers below the table (both with and without items being selected) - There is no scrollbar if the table is shorter than the viewport
enso-org · Sep 29, 2023 · 657be61 · 657be61
1 parent 421d6e2
commit 657be61
Show file tree

Hide file tree

Showing 34 changed files with 333 additions and 198 deletions.
diff --git a/app/ide-desktop/lib/client/watch.ts b/app/ide-desktop/lib/client/watch.ts
@@ -86,7 +86,6 @@ const ALL_BUNDLES_READY = new Promise<Watches>((resolve, reject) => {
             },
         })
         dashboardOpts.outdir = path.resolve(IDE_DIR_PATH, 'assets')
-        dashboardOpts.write = false
         const dashboardBuilder = await esbuild.context(dashboardOpts)
         const dashboard = await dashboardBuilder.rebuild()
         console.log('Result of dashboard bundling: ', dashboard)

diff --git a/...desktop/lib/dashboard/src/authentication/src/authentication/components/forgotPassword.tsx b/...desktop/lib/dashboard/src/authentication/src/authentication/components/forgotPassword.tsx
@@ -26,13 +26,8 @@ export default function ForgotPassword() {
 
     return (
         <div className="min-h-screen flex flex-col items-center justify-center">
-            <div
-                className={
-                    'flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md w-full ' +
-                    'max-w-md'
-                }
-            >
-                <div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
+            <div className="flex flex-col bg-white shadow-md p-8 rounded-md w-full max-w-md">
+                <div className="font-medium self-center text-xl uppercase text-gray-800">
                     Forgot Your Password?
                 </div>
                 <div className="mt-10">
@@ -45,7 +40,7 @@ export default function ForgotPassword() {
                         <div className="flex flex-col mb-6">
                             <label
                                 htmlFor="email"
-                                className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
+                                className="mb-1 text-xs tracking-wide text-gray-600"
                             >
                                 E-Mail Address:
                             </label>
@@ -69,7 +64,7 @@ export default function ForgotPassword() {
                                 type="submit"
                                 className={
                                     'flex items-center justify-center focus:outline-none text-white text-sm ' +
-                                    'sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition ' +
+                                    'bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition ' +
                                     'duration-150 ease-in'
                                 }
                             >

diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/input.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/input.tsx
@@ -95,7 +95,7 @@ export default function Input(props: InputProps) {
                       }
                     : onBlur
             }
-            className="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
+            className="text-sm placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
         />
     )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/login.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/login.tsx
@@ -44,13 +44,8 @@ export default function Login() {
 
     return (
         <div className="min-h-screen flex flex-col items-center justify-center">
-            <div
-                className={
-                    'flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md ' +
-                    'w-full max-w-md'
-                }
-            >
-                <div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
+            <div className="flex flex-col bg-white shadow-md p-8 rounded-md w-full max-w-md">
+                <div className="font-medium self-center text-xl uppercase text-gray-800">
                     Login To Your Account
                 </div>
                 <button
@@ -99,7 +94,7 @@ export default function Login() {
                         <div className="flex flex-col mb-6">
                             <label
                                 htmlFor="email"
-                                className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
+                                className="mb-1 text-xs tracking-wide text-gray-600"
                             >
                                 E-Mail Address:
                             </label>
@@ -124,7 +119,7 @@ export default function Login() {
                         <div className="flex flex-col mb-6">
                             <label
                                 htmlFor="password"
-                                className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
+                                className="mb-1 text-xs tracking-wide text-gray-600"
                             >
                                 Password:
                             </label>
@@ -152,7 +147,7 @@ export default function Login() {
                             <div className="flex ml-auto">
                                 <router.Link
                                     to={app.FORGOT_PASSWORD_PATH}
-                                    className="inline-flex text-xs sm:text-sm text-blue-500 hover:text-blue-700"
+                                    className="inline-flex text-xs text-blue-500 hover:text-blue-700"
                                 >
                                     Forgot Your Password?
                                 </router.Link>
@@ -164,7 +159,7 @@ export default function Login() {
                                 type="submit"
                                 className={
                                     'flex items-center justify-center focus:outline-none text-white ' +
-                                    'text-sm sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full ' +
+                                    'text-sm bg-blue-600 hover:bg-blue-700 rounded py-2 w-full ' +
                                     'transition duration-150 ease-in disabled:opacity-50'
                                 }
                             >

diff --git a/...e-desktop/lib/dashboard/src/authentication/src/authentication/components/registration.tsx b/...e-desktop/lib/dashboard/src/authentication/src/authentication/components/registration.tsx
@@ -39,14 +39,14 @@ export default function Registration() {
     const { organizationId } = parseUrlSearchParams(location.search)
 
     return (
-        <div className="flex flex-col items-center justify-center min-h-screen px-4 py-8">
+        <div className="flex flex-col items-center justify-center min-h-screen p-8">
             <div
                 className={
                     'rounded-md bg-white w-full max-w-sm sm:max-w-md border border-gray-200 ' +
                     'shadow-md px-4 py-6 sm:p-8'
                 }
             >
-                <div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
+                <div className="font-medium self-center text-xl uppercase text-gray-800">
                     Create new account
                 </div>
 
@@ -59,10 +59,7 @@ export default function Registration() {
                     }}
                 >
                     <div className="flex flex-col mb-4">
-                        <label
-                            htmlFor="email"
-                            className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
-                        >
+                        <label htmlFor="email" className="mb-1 text-xs tracking-wide text-gray-600">
                             E-Mail Address:
                         </label>
                         <div className="relative">
@@ -85,7 +82,7 @@ export default function Registration() {
                     <div className="flex flex-col mb-4">
                         <label
                             htmlFor="password"
-                            className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
+                            className="mb-1 text-xs tracking-wide text-gray-600"
                         >
                             Password:
                         </label>
@@ -111,7 +108,7 @@ export default function Registration() {
                     <div className="flex flex-col mb-4">
                         <label
                             htmlFor="password_confirmation"
-                            className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
+                            className="mb-1 text-xs tracking-wide text-gray-600"
                         >
                             Confirm Password:
                         </label>
@@ -140,7 +137,7 @@ export default function Registration() {
                             type="submit"
                             className={
                                 'flex items-center justify-center focus:outline-none text-white text-sm ' +
-                                'sm:text-base bg-indigo-600 hover:bg-indigo-700 rounded py-2 w-full transition ' +
+                                'bg-indigo-600 hover:bg-indigo-700 rounded py-2 w-full transition ' +
                                 'duration-150 ease-in disabled:opacity-50'
                             }
                         >

diff --git a/...-desktop/lib/dashboard/src/authentication/src/authentication/components/resetPassword.tsx b/...-desktop/lib/dashboard/src/authentication/src/authentication/components/resetPassword.tsx
@@ -54,13 +54,8 @@ export default function ResetPassword() {
 
     return (
         <div className="min-h-screen flex flex-col items-center justify-center">
-            <div
-                className={
-                    'flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md w-full ' +
-                    'max-w-md'
-                }
-            >
-                <div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
+            <div className={'flex flex-col bg-white shadow-md p-8 rounded-md w-full ' + 'max-w-md'}>
+                <div className="font-medium self-center text-xl uppercase text-gray-800">
                     Reset Your Password
                 </div>
                 <div className="mt-10">
@@ -73,7 +68,7 @@ export default function ResetPassword() {
                         <div className="flex flex-col mb-6">
                             <label
                                 htmlFor="email"
-                                className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
+                                className="mb-1 text-xs tracking-wide text-gray-600"
                             >
                                 E-Mail Address:
                             </label>
@@ -96,7 +91,7 @@ export default function ResetPassword() {
                         <div className="flex flex-col mb-6">
                             <label
                                 htmlFor="code"
-                                className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
+                                className="mb-1 text-xs tracking-wide text-gray-600"
                             >
                                 Confirmation Code:
                             </label>
@@ -119,7 +114,7 @@ export default function ResetPassword() {
                         <div className="flex flex-col mb-6">
                             <label
                                 htmlFor="new_password"
-                                className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
+                                className="mb-1 text-xs tracking-wide text-gray-600"
                             >
                                 New Password:
                             </label>
@@ -145,7 +140,7 @@ export default function ResetPassword() {
                         <div className="flex flex-col mb-6">
                             <label
                                 htmlFor="new_password_confirm"
-                                className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
+                                className="mb-1 text-xs tracking-wide text-gray-600"
                             >
                                 Confirm New Password:
                             </label>
@@ -173,7 +168,7 @@ export default function ResetPassword() {
                                 type="submit"
                                 className={
                                     'flex items-center justify-center focus:outline-none text-white text-sm ' +
-                                    'sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition ' +
+                                    'bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition ' +
                                     'duration-150 ease-in'
                                 }
                             >

diff --git a/...de-desktop/lib/dashboard/src/authentication/src/authentication/components/setUsername.tsx b/...de-desktop/lib/dashboard/src/authentication/src/authentication/components/setUsername.tsx
@@ -32,7 +32,7 @@ export default function SetUsername() {
                     'max-w-md'
                 }
             >
-                <div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
+                <div className="font-medium self-center text-xl uppercase text-gray-800">
                     Set your username
                 </div>
                 <div className="mt-10">
@@ -64,7 +64,7 @@ export default function SetUsername() {
                                 type="submit"
                                 className={
                                     'flex items-center justify-center focus:outline-none text-white text-sm ' +
-                                    'sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition ' +
+                                    'bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition ' +
                                     'duration-150 ease-in'
                                 }
                             >

diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/auth.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/auth.tsx
@@ -201,7 +201,7 @@ export function AuthProvider(props: AuthProviderProps) {
         setInitialized(true)
         setUserSession(OFFLINE_USER_SESSION)
         if (supportsLocalBackend) {
-            setBackendWithoutSavingType(new localBackend.LocalBackend(projectManagerUrl, null))
+            setBackendWithoutSavingType(new localBackend.LocalBackend(projectManagerUrl))
         } else {
             // Provide dummy headers to avoid errors. This `Backend` will never be called as
             // the entire UI will be disabled.

diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx
@@ -203,7 +203,7 @@ function AppRouter(props: AppProps) {
     const userSession = authService.cognito.userSession.bind(authService.cognito)
     const registerAuthEventListener = authService.registerAuthEventListener
     const initialBackend: backend.Backend = isAuthenticationDisabled
-        ? new localBackend.LocalBackend(projectManagerUrl, null)
+        ? new localBackend.LocalBackend(projectManagerUrl)
         : // This is safe, because the backend is always set by the authentication flow.
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           null!

diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/assetTreeNode.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/assetTreeNode.ts
@@ -9,11 +9,16 @@ import * as backendModule from './backend'
 
 /** A node in the drive's item tree. */
 export interface AssetTreeNode {
-    /** The original id of the asset (the placeholder id for new assets). This must never change. */
+    /** The id of the asset (or the placeholder id for new assets). This must never change. */
     key: backendModule.AssetId
     /** The actual asset. This MAY change if this is initially a placeholder item, but rows MAY
      * keep updated values within the row itself as well. */
     item: backendModule.AnyAsset
+    /** The id of the asset's parent directory (or the placeholder id for new assets).
+     * This must never change. */
+    directoryKey: backendModule.AssetId | null
+    /** The actual id of the asset's parent directory (or the placeholder id for new assets). */
+    directoryId: backendModule.DirectoryId | null
     /** This is `null` if the asset is not a directory asset, OR if it is a collapsed directory
      * asset. */
     children: AssetTreeNode[] | null
@@ -113,11 +118,15 @@ export function assetTreePreorderTraversal(
 /** Creates an {@link AssetTreeNode} from a {@link backendModule.AnyAsset}. */
 export function assetTreeNodeFromAsset(
     asset: backendModule.AnyAsset,
+    directoryKey: backendModule.AssetId | null,
+    directoryId: backendModule.DirectoryId | null,
     depth: number
 ): AssetTreeNode {
     return {
         key: asset.id,
         item: asset,
+        directoryKey,
+        directoryId,
         children: null,
         depth,
     }

diff --git a/...de-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetContextMenu.tsx b/...de-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetContextMenu.tsx
@@ -337,16 +337,20 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
                     }}
                 />
             </ContextMenu>
-            {asset.type === backendModule.AssetType.directory ? (
-                <GlobalContextMenu
-                    hidden={hidden}
-                    // This is SAFE, as this only exists when the item is a directory.
+            <GlobalContextMenu
+                hidden={hidden}
+                directoryKey={
+                    // This is SAFE, as both branches are guaranteed to be `DirectoryId`s
                     // eslint-disable-next-line no-restricted-syntax
-                    directoryKey={item.key as backendModule.DirectoryId}
-                    directoryId={asset.id}
-                    dispatchAssetListEvent={dispatchAssetListEvent}
-                />
-            ) : null}
+                    (asset.type === backendModule.AssetType.directory
+                        ? item.key
+                        : item.directoryKey) as backendModule.DirectoryId
+                }
+                directoryId={
+                    asset.type === backendModule.AssetType.directory ? asset.id : item.directoryId
+                }
+                dispatchAssetListEvent={dispatchAssetListEvent}
+            />
         </ContextMenus>
     )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetInfoBar.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetInfoBar.tsx
@@ -17,7 +17,7 @@ export interface AssetInfoBarProps {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default function AssetInfoBar(_props: AssetInfoBarProps) {
     return (
-        <div className="flex items-center shrink-0 bg-frame rounded-full gap-3 h-8 px-2 cursor-default pointer-events-auto">
+        <div className="flex items-center shrink-0 bg-frame backdrop-blur-3xl rounded-full gap-3 h-8 px-2 cursor-default pointer-events-auto">
             <Button
                 active={false}
                 disabled