refactor: Create SlideTransition and FadeTransition components (#1871)

- Create some components to wrap CSSTransition
- Don't have to hardcode class names
- Update tests and docs

---------

Co-authored-by: Don <dsmmcken@gmail.com>

Author: mofojed

package-lock.json

@@ -42,8 +42,7 @@
     "@deephaven/redux": "file:../redux",
     "@deephaven/utils": "file:../utils",
     "classnames": "^2.3.1",
-    "js-cookie": "^3.0.5",
-    "react-transition-group": "^4.4.2"
+    "js-cookie": "^3.0.5"
   },
   "devDependencies": {
     "@types/react": "^17.0.2"

packages/auth-plugins/package.json

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import Cookies from 'js-cookie';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -20,6 +20,17 @@ jest.mock('@deephaven/jsapi-components', () => ({
   }),
 }));
 
+jest.mock('@deephaven/components', () => ({
+  ...jest.requireActual('@deephaven/components'),
+  FadeTransition: ({
+    children,
+    in: inProp,
+  }: {
+    children: ReactNode;
+    in: boolean;
+  }) => (inProp ? children : null),
+}));
+
 jest.mock('js-cookie');
 const mockedCookie = Cookies as jest.Mocked<typeof Cookies>;
 const mockChildText = 'Mock Auth Psk Child';

packages/auth-plugins/src/AuthPluginPsk.test.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { LoadingOverlay, ThemeExport } from '@deephaven/components';
+import { FadeTransition, LoadingOverlay } from '@deephaven/components';
 import { useClient } from '@deephaven/jsapi-bootstrap';
 import { useBroadcastLoginListener } from '@deephaven/jsapi-components';
 import Log from '@deephaven/log';
@@ -169,13 +168,7 @@ function Component({ children, logoPath }: AuthPluginPskProps): JSX.Element {
     <>
       {isLoggedIn && children}
       {isInputRequired && (
-        <CSSTransition
-          in={!isLoggedIn}
-          timeout={ThemeExport.transitionMs}
-          classNames="fade"
-          mountOnEnter
-          unmountOnExit
-        >
+        <FadeTransition in={!isLoggedIn} mountOnEnter unmountOnExit>
           <Login logoPath={logoPath}>
             <LoginForm
               errorMessage={getErrorMessage(error)}
@@ -203,7 +196,7 @@ function Component({ children, logoPath }: AuthPluginPskProps): JSX.Element {
               </div>
             </LoginForm>
           </Login>
-        </CSSTransition>
+        </FadeTransition>
       )}
       <LoadingOverlay
         data-testid="auth-psk-loading"

packages/auth-plugins/src/AuthPluginPsk.tsx

@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import memoize from 'memoize-one';
-import { CSSTransition } from 'react-transition-group';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import shortid from 'shortid';
@@ -26,6 +25,7 @@ import {
   DebouncedModal,
   NavTabList,
   type NavTabItem,
+  SlideTransition,
 } from '@deephaven/components';
 import { SHORTCUTS as IRIS_GRID_SHORTCUTS } from '@deephaven/iris-grid';
 import {
@@ -1002,19 +1002,13 @@ export class AppMainContainer extends Component<
             ...dashboardPlugins,
           ]}
         />
-        <CSSTransition
-          in={isSettingsMenuShown}
-          timeout={ThemeExport.transitionMidMs}
-          classNames="slide-left"
-          mountOnEnter
-          unmountOnExit
-        >
+        <SlideTransition in={isSettingsMenuShown} mountOnEnter unmountOnExit>
           <SettingsMenu
             serverConfigValues={serverConfigValues}
             onDone={this.handleSettingsMenuHide}
             user={user}
           />
-        </CSSTransition>
+        </SlideTransition>
         <ContextActions actions={contextActions} />
         <input
           ref={this.importElement}

packages/code-studio/src/main/AppMainContainer.tsx

@@ -7,10 +7,10 @@ import React, {
 import { connect } from 'react-redux';
 import { dhNewCircleLargeFilled, vsTrash } from '@deephaven/icons';
 import memoize from 'memoizee';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { TransitionGroup } from 'react-transition-group';
 import debounce from 'lodash.debounce';
 import classNames from 'classnames';
-import { Button, Select, ThemeExport } from '@deephaven/components';
+import { Button, FadeTransition, Select } from '@deephaven/components';
 import {
   DateTimeColumnFormatter,
   IntegerColumnFormatter,
@@ -577,14 +577,9 @@ export class ColumnSpecificSectionContent extends PureComponent<
     const { formatRulesChanged, formatSettings } = this.state;
 
     const formatRules = formatSettings.map((rule, index) => (
-      <CSSTransition
-        key={rule.id}
-        classNames="fade"
-        timeout={ThemeExport.transitionMs}
-        onEnter={this.handleFormatRuleEntered}
-      >
+      <FadeTransition key={rule.id} onEnter={this.handleFormatRuleEntered}>
         {this.renderFormatRule(index, rule)}
-      </CSSTransition>
+      </FadeTransition>
     ));
 
     const addNewRuleButton = (

packages/code-studio/src/settings/ColumnSpecificSectionContent.tsx

@@ -5,6 +5,7 @@ import { vsClose } from '@deephaven/icons';
 import Button from './Button';
 import ThemeExport from './ThemeExport';
 import './ToastNotification.scss';
+import { FadeTransition } from './transitions';
 
 type ToastNotificationProps = {
   buttons?: (typeof Button)[];
@@ -50,15 +51,14 @@ function ToastNotification({
         <div className="message-container">
           <span className="message">{message}</span>
         </div>
-        <CSSTransition
+        <FadeTransition
           in={hasButtons}
           timeout={ThemeExport.transitionSlowMs}
-          classNames="fade"
           mountOnEnter
           unmountOnExit
         >
           <div className="buttons-container">{buttons}</div>
-        </CSSTransition>
+        </FadeTransition>
         {onDismiss && (
           <Button
             kind="ghost"

packages/components/src/ToastNotification.tsx

@@ -53,6 +53,7 @@ export * from './SpectrumUtils';
 export * from './TableViewEmptyState';
 export * from './TextWithTooltip';
 export * from './theme';
+export * from './transitions';
 export { default as ThemeExport } from './ThemeExport';
 export { default as TimeInput } from './TimeInput';
 export { default as TimeSlider } from './TimeSlider';

packages/components/src/index.ts

@@ -4,8 +4,8 @@ import { render, screen } from '@testing-library/react';
 import Stack from './Stack';
 
 // Mock the CSS transitions to appear right away, and call the entered animation after a timeout
-jest.mock('react-transition-group', () => ({
-  CSSTransition: jest.fn(props => {
+jest.mock('../transitions', () => ({
+  SlideTransition: jest.fn(props => {
     if (props.in === false) {
       return null;
     }

packages/components/src/navigation/Stack.test.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { CSSTransition } from 'react-transition-group';
 import { usePrevious } from '@deephaven/react-hooks';
-import ThemeExport from '../ThemeExport';
 import './Stack.scss';
+import { SlideTransition } from '../transitions';
 
 export type StackProps = {
   children: React.ReactNode | React.ReactNode[];
@@ -88,10 +87,9 @@ export function Stack({
         {mainView}
       </div>
 
-      <CSSTransition
+      <SlideTransition
+        direction="right"
         in={poppingView != null}
-        timeout={ThemeExport.transitionMidMs}
-        classNames="slide-right"
         onEntered={popComplete}
       >
         {/* Without the fragment, the transition doesn't work. Without the conditional render, the stack is blank */}
@@ -101,20 +99,15 @@ export function Stack({
             <div className="popping-view">{poppingView}</div>
           )}
         </>
-      </CSSTransition>
-      <CSSTransition
-        in={pushingView != null}
-        timeout={ThemeExport.transitionMidMs}
-        classNames="slide-left"
-        onEntered={pushComplete}
-      >
+      </SlideTransition>
+      <SlideTransition in={pushingView != null} onEntered={pushComplete}>
         {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
         <>
           {pushingView != null && (
             <div className="pushing-view">{pushingView}</div>
           )}
         </>
-      </CSSTransition>
+      </SlideTransition>
     </div>
   );
 }