Fixes

enso-org · Nov 28, 2024 · 264f232 · 264f232
1 parent d8e287a
commit 264f232
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 68 deletions.
diff --git a/app/common/src/text/english.json b/app/common/src/text/english.json
@@ -477,6 +477,8 @@
   "cannotCreateAssetsHere": "You do not have the permissions to create assets here.",
   "enableVersionChecker": "Enable Version Checker",
   "enableVersionCheckerDescription": "Show a dialog if the current version of the desktop app does not match the latest version.",
+  "disableAnimations": "Disable animations",
+  "disableAnimationsDescription": "Disable all animations in the app.",
   "removeTheLocalDirectoryXFromFavorites": "remove the local folder '$0' from your favorites",
   "changeLocalRootDirectoryInSettings": "Change your root folder in Settings.",
   "localStorage": "Local Storage",

diff --git a/app/gui/src/dashboard/components/AriaComponents/Dialog/Dialog.tsx b/app/gui/src/dashboard/components/AriaComponents/Dialog/Dialog.tsx
@@ -341,54 +341,56 @@ function DialogContent(props: DialogContentProps) {
         {...ariaDialogProps}
       >
         {(opts) => (
-          <dialogProvider.DialogProvider value={{ close: opts.close, dialogId }}>
-            <motion.div layout className="w-full" transition={{ duration: 0 }}>
-              <DialogHeader
-                closeButton={closeButton}
-                title={title}
-                titleId={titleId}
-                headerClassName={styles.header({ scrolledToTop: isScrolledToTop })}
-                closeButtonClassName={styles.closeButton()}
-                headingClassName={styles.heading()}
-                headerDimensionsRef={headerDimensionsRef}
-              />
-            </motion.div>
-
-            <motion.div
-              layout
-              layoutScroll
-              className={styles.scroller()}
-              ref={handleScroll}
-              onScroll={handleScrollEvent}
-              transition={{ duration: 0 }}
-            >
-              <div className={styles.measurerWrapper()}>
-                {/* eslint-disable jsdoc/check-alignment */}
-                {/**
-                 * This div is used to measure the content dimensions.
-                 * It's takes the same grid area as the content, thus
-                 * resizes together with the content.
-                 *
-                 * We use grid + grid-area to avoid setting `position: relative`
-                 * on the element, which would interfere with the layout.
-                 *
-                 * It's set to `pointer-events-none` so that it doesn't
-                 * interfere with the layout.
-                 */}
-                {/* eslint-enable jsdoc/check-alignment */}
-                <div ref={contentDimensionsRef} className={styles.measurer()} />
-                <div className={styles.content()}>
-                  <errorBoundary.ErrorBoundary>
-                    <suspense.Suspense
-                      loaderProps={{ minHeight: type === 'fullscreen' ? 'full' : 'h32' }}
-                    >
-                      {typeof children === 'function' ? children(opts) : children}
-                    </suspense.Suspense>
-                  </errorBoundary.ErrorBoundary>
+          <>
+            <dialogProvider.DialogProvider close={opts.close} dialogId={dialogId}>
+              <motion.div layout className="w-full" transition={{ duration: 0 }}>
+                <DialogHeader
+                  closeButton={closeButton}
+                  title={title}
+                  titleId={titleId}
+                  headerClassName={styles.header({ scrolledToTop: isScrolledToTop })}
+                  closeButtonClassName={styles.closeButton()}
+                  headingClassName={styles.heading()}
+                  headerDimensionsRef={headerDimensionsRef}
+                />
+              </motion.div>
+
+              <motion.div
+                layout
+                layoutScroll
+                className={styles.scroller()}
+                ref={handleScroll}
+                onScroll={handleScrollEvent}
+                transition={{ duration: 0 }}
+              >
+                <div className={styles.measurerWrapper()}>
+                  {/* eslint-disable jsdoc/check-alignment */}
+                  {/**
+                   * This div is used to measure the content dimensions.
+                   * It's takes the same grid area as the content, thus
+                   * resizes together with the content.
+                   *
+                   * We use grid + grid-area to avoid setting `position: relative`
+                   * on the element, which would interfere with the layout.
+                   *
+                   * It's set to `pointer-events-none` so that it doesn't
+                   * interfere with the layout.
+                   */}
+                  {/* eslint-enable jsdoc/check-alignment */}
+                  <div ref={contentDimensionsRef} className={styles.measurer()} />
+                  <div className={styles.content()}>
+                    <errorBoundary.ErrorBoundary>
+                      <suspense.Suspense
+                        loaderProps={{ minHeight: type === 'fullscreen' ? 'full' : 'h32' }}
+                      >
+                        {typeof children === 'function' ? children(opts) : children}
+                      </suspense.Suspense>
+                    </errorBoundary.ErrorBoundary>
+                  </div>
                 </div>
-              </div>
-            </motion.div>
-          </dialogProvider.DialogProvider>
+              </motion.div>
+            </dialogProvider.DialogProvider>
+          </>
         )}
       </MotionDialog>
 

diff --git a/app/gui/src/dashboard/components/AriaComponents/Dialog/DialogProvider.tsx b/app/gui/src/dashboard/components/AriaComponents/Dialog/DialogProvider.tsx
@@ -16,8 +16,13 @@ export interface DialogContextValue {
 const DialogContext = React.createContext<DialogContextValue | null>(null)
 
 /** The provider for a dialog. */
-// eslint-disable-next-line no-restricted-syntax
-export const DialogProvider = DialogContext.Provider
+export function DialogProvider(props: DialogContextValue & React.PropsWithChildren) {
+  const { children, close, dialogId } = props
+
+  const value = React.useMemo(() => ({ close, dialogId }), [close, dialogId])
+
+  return <DialogContext.Provider value={value}>{children}</DialogContext.Provider>
+}
 
 /** Custom hook to get the dialog context. */
 export function useDialogContext() {

diff --git a/app/gui/src/dashboard/components/AriaComponents/Dialog/Popover.tsx b/app/gui/src/dashboard/components/AriaComponents/Dialog/Popover.tsx
@@ -110,7 +110,6 @@ export function Popover(props: PopoverProps) {
     }),
   })
 
-  const dialogContextValue = React.useMemo(() => ({ close, dialogId }), [close, dialogId])
   const popoverStyle = React.useMemo(() => ({ zIndex: '' }), [])
 
   return (
@@ -140,13 +139,13 @@ export function Popover(props: PopoverProps) {
             ref={dialogRef}
             className={POPOVER_STYLES({ ...opts, size, rounded }).dialog()}
           >
-            <dialogProvider.DialogProvider value={dialogContextValue}>
-              <errorBoundary.ErrorBoundary>
-                <suspense.Suspense loaderProps={SUSPENSE_LOADER_PROPS}>
+            <errorBoundary.ErrorBoundary>
+              <suspense.Suspense loaderProps={SUSPENSE_LOADER_PROPS}>
+                <dialogProvider.DialogProvider close={close} dialogId={dialogId}>
                   {typeof children === 'function' ? children({ ...opts, close }) : children}
-                </suspense.Suspense>
-              </errorBoundary.ErrorBoundary>
-            </dialogProvider.DialogProvider>
+                </dialogProvider.DialogProvider>
+              </suspense.Suspense>
+            </errorBoundary.ErrorBoundary>
           </div>
         </aria.FocusScope>
       )}

diff --git a/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx b/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx
@@ -21,8 +21,10 @@ import * as authProvider from '#/providers/AuthProvider'
 import { UserSessionType } from '#/providers/AuthProvider'
 import * as textProvider from '#/providers/TextProvider'
 import {
+  useAnimationsDisabled,
   useEnableVersionChecker,
   usePaywallDevtools,
+  useSetAnimationsDisabled,
   useSetEnableVersionChecker,
   useShowDevtools,
 } from './EnsoDevtoolsProvider'
@@ -60,6 +62,10 @@ export function EnsoDevtools() {
   const { features, setFeature } = usePaywallDevtools()
   const enableVersionChecker = useEnableVersionChecker()
   const setEnableVersionChecker = useSetEnableVersionChecker()
+
+  const animationsDisabled = useAnimationsDisabled()
+  const setAnimationsDisabled = useSetAnimationsDisabled()
+
   const { localStorage } = useLocalStorage()
   const [localStorageState, setLocalStorageState] = React.useState<Partial<LocalStorageData>>({})
 
@@ -150,19 +156,36 @@ export function EnsoDevtools() {
           </ariaComponents.Text>
 
           <ariaComponents.Form
-            schema={(z) => z.object({ enableVersionChecker: z.boolean() })}
-            defaultValues={{ enableVersionChecker: enableVersionChecker ?? !IS_DEV_MODE }}
+            schema={(z) =>
+              z.object({ enableVersionChecker: z.boolean(), disableAnimations: z.boolean() })
+            }
+            defaultValues={{
+              enableVersionChecker: enableVersionChecker ?? !IS_DEV_MODE,
+              disableAnimations: animationsDisabled,
+            }}
           >
             {({ form }) => (
-              <ariaComponents.Switch
-                form={form}
-                name="enableVersionChecker"
-                label={getText('enableVersionChecker')}
-                description={getText('enableVersionCheckerDescription')}
-                onChange={(value) => {
-                  setEnableVersionChecker(value)
-                }}
-              />
+              <>
+                <ariaComponents.Switch
+                  form={form}
+                  name="disableAnimations"
+                  label={getText('disableAnimations')}
+                  description={getText('disableAnimationsDescription')}
+                  onChange={(value) => {
+                    setAnimationsDisabled(value)
+                  }}
+                />
+
+                <ariaComponents.Switch
+                  form={form}
+                  name="enableVersionChecker"
+                  label={getText('enableVersionChecker')}
+                  description={getText('enableVersionCheckerDescription')}
+                  onChange={(value) => {
+                    setEnableVersionChecker(value)
+                  }}
+                />
+              </>
             )}
           </ariaComponents.Form>
 

diff --git a/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx b/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx
@@ -5,6 +5,7 @@
 import type { PaywallFeatureName } from '#/hooks/billing'
 import * as zustand from '#/utilities/zustand'
 import { IS_DEV_MODE } from 'enso-common/src/detect'
+import { MotionGlobalConfig } from 'framer-motion'
 
 /** Configuration for a paywall feature. */
 export interface PaywallDevtoolsFeatureConfiguration {
@@ -24,6 +25,8 @@ interface EnsoDevtoolsStore {
   readonly paywallFeatures: Record<PaywallFeatureName, PaywallDevtoolsFeatureConfiguration>
   readonly setPaywallFeature: (feature: PaywallFeatureName, isForceEnabled: boolean | null) => void
   readonly setEnableVersionChecker: (showVersionChecker: boolean | null) => void
+  readonly animationsDisabled: boolean
+  readonly setAnimationsDisabled: (animationsDisabled: boolean) => void
 }
 
 export const ensoDevtoolsStore = zustand.createStore<EnsoDevtoolsStore>((set) => ({
@@ -51,6 +54,20 @@ export const ensoDevtoolsStore = zustand.createStore<EnsoDevtoolsStore>((set) =>
   setEnableVersionChecker: (showVersionChecker) => {
     set({ showVersionChecker })
   },
+  animationsDisabled: localStorage.getItem('disableAnimations') === 'true',
+  setAnimationsDisabled: (animationsDisabled) => {
+    if (animationsDisabled) {
+      localStorage.setItem('disableAnimations', 'true')
+      MotionGlobalConfig.skipAnimations = true
+      document.documentElement.classList.add('disable-animations')
+    } else {
+      localStorage.setItem('disableAnimations', 'false')
+      MotionGlobalConfig.skipAnimations = false
+      document.documentElement.classList.remove('disable-animations')
+    }
+
+    set({ animationsDisabled })
+  },
 }))
 
 // ===============================
@@ -75,6 +92,20 @@ export function useSetEnableVersionChecker() {
   })
 }
 
+/** A function to get whether animations are disabled. */
+export function useAnimationsDisabled() {
+  return zustand.useStore(ensoDevtoolsStore, (state) => state.animationsDisabled, {
+    unsafeEnableTransition: true,
+  })
+}
+
+/** A function to set whether animations are disabled. */
+export function useSetAnimationsDisabled() {
+  return zustand.useStore(ensoDevtoolsStore, (state) => state.setAnimationsDisabled, {
+    unsafeEnableTransition: true,
+  })
+}
+
 /** A hook that provides access to the paywall devtools. */
 export function usePaywallDevtools() {
   return zustand.useStore(

diff --git a/app/gui/src/dashboard/index.tsx b/app/gui/src/dashboard/index.tsx
@@ -32,7 +32,18 @@ import { MotionGlobalConfig } from 'framer-motion'
 
 export type { GraphEditorRunner } from '#/layouts/Editor'
 
-MotionGlobalConfig.skipAnimations = window.DISABLE_ANIMATIONS ?? false
+const ARE_ANIMATIONS_DISABLED =
+  window.DISABLE_ANIMATIONS === true ||
+  localStorage.getItem('disableAnimations') === 'true' ||
+  false
+
+MotionGlobalConfig.skipAnimations = ARE_ANIMATIONS_DISABLED
+
+if (ARE_ANIMATIONS_DISABLED) {
+  document.documentElement.classList.add('disable-animations')
+} else {
+  document.documentElement.classList.remove('disable-animations')
+}
 
 // =================
 // === Constants ===