From d055bcf41d6a39314b93b36bc450b9002e705d93 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 25 Feb 2025 00:08:01 +0000 Subject: [PATCH 1/8] refactor(common): convert nav-button to TypeScript --- .../{BackButton.js => BackButton.tsx} | 22 +++-- src/elements/common/nav-button/NavButton.js | 80 ------------------- src/elements/common/nav-button/NavButton.tsx | 79 ++++++++++++++++++ src/elements/common/nav-button/index.js | 2 - src/elements/common/nav-button/index.ts | 4 + 5 files changed, 92 insertions(+), 95 deletions(-) rename src/elements/common/nav-button/{BackButton.js => BackButton.tsx} (71%) delete mode 100644 src/elements/common/nav-button/NavButton.js create mode 100644 src/elements/common/nav-button/NavButton.tsx delete mode 100644 src/elements/common/nav-button/index.js create mode 100644 src/elements/common/nav-button/index.ts diff --git a/src/elements/common/nav-button/BackButton.js b/src/elements/common/nav-button/BackButton.tsx similarity index 71% rename from src/elements/common/nav-button/BackButton.js rename to src/elements/common/nav-button/BackButton.tsx index a1431b87a1..34def5e60f 100644 --- a/src/elements/common/nav-button/BackButton.js +++ b/src/elements/common/nav-button/BackButton.tsx @@ -1,30 +1,26 @@ -/** - * @flow - * @file Back Button component - * @author Box - */ - import * as React from 'react'; import classNames from 'classnames'; import { FormattedMessage } from 'react-intl'; -import { Route, type Location } from 'react-router-dom'; +import { Route } from 'react-router-dom'; +import type { Location } from 'history'; import IconNavigateLeft from '../../../icons/general/IconNavigateLeft'; import messages from '../messages'; import PlainButton from '../../../components/plain-button'; +import { ButtonType } from '../../../components/button'; import './BackButton.scss'; -type Props = { - className?: string, - to?: Location, -}; +export interface BackButtonProps { + className?: string; + to?: Location; +} -const BackButton = ({ className, to, ...rest }: Props) => ( +const BackButton = ({ className, to, ...rest }: BackButtonProps) => ( {({ history }) => ( (to ? history.push(to) : history.goBack())} - type="button" + type={ButtonType.BUTTON} {...rest} > diff --git a/src/elements/common/nav-button/NavButton.js b/src/elements/common/nav-button/NavButton.js deleted file mode 100644 index 5f3b0f936d..0000000000 --- a/src/elements/common/nav-button/NavButton.js +++ /dev/null @@ -1,80 +0,0 @@ -/** - * @flow - * @file Nav Button component intended to mimic React Router's NavLink component for non-anchor elements - * @author Box - */ - -import * as React from 'react'; -import classNames from 'classnames'; -import { Route } from 'react-router-dom'; -import type { Match, Location } from 'react-router-dom'; -import PlainButton from '../../../components/plain-button'; -import { isLeftClick } from '../../../utils/dom'; - -type Props = { - activeClassName?: string, - children: React.Node, - className?: string, - component?: React.ComponentType, - exact?: boolean, - isActive?: (match: Match, location: Location) => ?boolean, - isDisabled?: boolean, - onClick?: (event: SyntheticEvent<>) => void, - replace?: boolean, - strict?: boolean, - to: string | Location, -}; - -const NavButton = React.forwardRef>((props: Props, ref: React.Ref) => { - const { - activeClassName = 'bdl-is-active', - children, - className = 'bdl-NavButton', - component: Component = PlainButton, - exact, - isActive, - isDisabled, - onClick, - replace, - strict, - to, - ...rest - } = props; - const path = typeof to === 'object' ? to.pathname : to; - - const disabledClassName = 'bdl-is-disabled'; - - return ( - - {({ history, location, match }) => { - const isActiveValue = !!(isActive ? isActive(match, location) : match); - - return ( - { - if (onClick) { - onClick(event); - } - - if (!event.defaultPrevented && isLeftClick(event)) { - const method = replace ? history.replace : history.push; - method(to); - } - }} - ref={ref} - {...rest} - > - {children} - - ); - }} - - ); -}); - -export default NavButton; diff --git a/src/elements/common/nav-button/NavButton.tsx b/src/elements/common/nav-button/NavButton.tsx new file mode 100644 index 0000000000..37e76b15d5 --- /dev/null +++ b/src/elements/common/nav-button/NavButton.tsx @@ -0,0 +1,79 @@ +import * as React from 'react'; +import classNames from 'classnames'; +import { Route } from 'react-router-dom'; +import type { Location as RouterLocation } from 'history'; +import PlainButton, { PlainButtonProps } from '../../../components/plain-button'; +import { isLeftClick } from '../../../utils/dom'; + +export interface NavButtonProps { + activeClassName?: string; + children: React.ReactNode; + className?: string; + component?: React.ComponentType }>; + exact?: boolean; + isActive?: ( + match: { path: string; url: string; isExact: boolean; params: Record }, + location: RouterLocation, + ) => boolean | null; + isDisabled?: boolean; + onClick?: (event: React.SyntheticEvent) => void; + replace?: boolean; + strict?: boolean; + to: string | RouterLocation; +} + +const NavButton = React.forwardRef( + (props: NavButtonProps, ref: React.Ref) => { + const { + activeClassName = 'bdl-is-active', + children, + className = 'bdl-NavButton', + component: Component = PlainButton, + exact, + isActive, + isDisabled, + onClick, + replace, + strict, + to, + ...rest + } = props; + const path = typeof to === 'object' ? to.pathname : to; + + const disabledClassName = 'bdl-is-disabled'; + + return ( + + {({ history, location, match }) => { + const isActiveValue = !!(isActive ? isActive(match, location) : match); + + return ( + { + if (onClick) { + onClick(event); + } + + if (!event.defaultPrevented && isLeftClick(event)) { + const method = replace ? history.replace : history.push; + method(to); + } + }} + ref={ref} + {...rest} + > + {children} + + ); + }} + + ); + }, +); + +export default NavButton; diff --git a/src/elements/common/nav-button/index.js b/src/elements/common/nav-button/index.js deleted file mode 100644 index e7cb60159d..0000000000 --- a/src/elements/common/nav-button/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as BackButton } from './BackButton'; -export { default } from './NavButton'; diff --git a/src/elements/common/nav-button/index.ts b/src/elements/common/nav-button/index.ts new file mode 100644 index 0000000000..ddd3595f9d --- /dev/null +++ b/src/elements/common/nav-button/index.ts @@ -0,0 +1,4 @@ +export { default as BackButton } from './BackButton'; +export { default } from './NavButton'; +export type { BackButtonProps } from './BackButton'; +export type { NavButtonProps } from './NavButton'; From 35c06548e9520e891675241de981fd477f7a0253 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 25 Feb 2025 20:21:08 +0000 Subject: [PATCH 2/8] fix(common): address PR comments on nav-button TypeScript conversion --- .../common/nav-button/BackButton.js.flow | 39 +++++++++ src/elements/common/nav-button/BackButton.tsx | 2 +- .../common/nav-button/NavButton.js.flow | 80 +++++++++++++++++++ src/elements/common/nav-button/NavButton.tsx | 10 +-- 4 files changed, 124 insertions(+), 7 deletions(-) create mode 100644 src/elements/common/nav-button/BackButton.js.flow create mode 100644 src/elements/common/nav-button/NavButton.js.flow diff --git a/src/elements/common/nav-button/BackButton.js.flow b/src/elements/common/nav-button/BackButton.js.flow new file mode 100644 index 0000000000..a1431b87a1 --- /dev/null +++ b/src/elements/common/nav-button/BackButton.js.flow @@ -0,0 +1,39 @@ +/** + * @flow + * @file Back Button component + * @author Box + */ + +import * as React from 'react'; +import classNames from 'classnames'; +import { FormattedMessage } from 'react-intl'; +import { Route, type Location } from 'react-router-dom'; +import IconNavigateLeft from '../../../icons/general/IconNavigateLeft'; +import messages from '../messages'; +import PlainButton from '../../../components/plain-button'; +import './BackButton.scss'; + +type Props = { + className?: string, + to?: Location, +}; + +const BackButton = ({ className, to, ...rest }: Props) => ( + + {({ history }) => ( + (to ? history.push(to) : history.goBack())} + type="button" + {...rest} + > + + + + + + )} + +); + +export default BackButton; diff --git a/src/elements/common/nav-button/BackButton.tsx b/src/elements/common/nav-button/BackButton.tsx index 34def5e60f..1a226c26c8 100644 --- a/src/elements/common/nav-button/BackButton.tsx +++ b/src/elements/common/nav-button/BackButton.tsx @@ -4,8 +4,8 @@ import { FormattedMessage } from 'react-intl'; import { Route } from 'react-router-dom'; import type { Location } from 'history'; import IconNavigateLeft from '../../../icons/general/IconNavigateLeft'; -import messages from '../messages'; import PlainButton from '../../../components/plain-button'; +import messages from '../messages'; import { ButtonType } from '../../../components/button'; import './BackButton.scss'; diff --git a/src/elements/common/nav-button/NavButton.js.flow b/src/elements/common/nav-button/NavButton.js.flow new file mode 100644 index 0000000000..5f3b0f936d --- /dev/null +++ b/src/elements/common/nav-button/NavButton.js.flow @@ -0,0 +1,80 @@ +/** + * @flow + * @file Nav Button component intended to mimic React Router's NavLink component for non-anchor elements + * @author Box + */ + +import * as React from 'react'; +import classNames from 'classnames'; +import { Route } from 'react-router-dom'; +import type { Match, Location } from 'react-router-dom'; +import PlainButton from '../../../components/plain-button'; +import { isLeftClick } from '../../../utils/dom'; + +type Props = { + activeClassName?: string, + children: React.Node, + className?: string, + component?: React.ComponentType, + exact?: boolean, + isActive?: (match: Match, location: Location) => ?boolean, + isDisabled?: boolean, + onClick?: (event: SyntheticEvent<>) => void, + replace?: boolean, + strict?: boolean, + to: string | Location, +}; + +const NavButton = React.forwardRef>((props: Props, ref: React.Ref) => { + const { + activeClassName = 'bdl-is-active', + children, + className = 'bdl-NavButton', + component: Component = PlainButton, + exact, + isActive, + isDisabled, + onClick, + replace, + strict, + to, + ...rest + } = props; + const path = typeof to === 'object' ? to.pathname : to; + + const disabledClassName = 'bdl-is-disabled'; + + return ( + + {({ history, location, match }) => { + const isActiveValue = !!(isActive ? isActive(match, location) : match); + + return ( + { + if (onClick) { + onClick(event); + } + + if (!event.defaultPrevented && isLeftClick(event)) { + const method = replace ? history.replace : history.push; + method(to); + } + }} + ref={ref} + {...rest} + > + {children} + + ); + }} + + ); +}); + +export default NavButton; diff --git a/src/elements/common/nav-button/NavButton.tsx b/src/elements/common/nav-button/NavButton.tsx index 37e76b15d5..3876660365 100644 --- a/src/elements/common/nav-button/NavButton.tsx +++ b/src/elements/common/nav-button/NavButton.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import classNames from 'classnames'; import { Route } from 'react-router-dom'; -import type { Location as RouterLocation } from 'history'; +import type { match } from 'react-router'; +import type { Location } from 'history'; import PlainButton, { PlainButtonProps } from '../../../components/plain-button'; import { isLeftClick } from '../../../utils/dom'; @@ -11,15 +12,12 @@ export interface NavButtonProps { className?: string; component?: React.ComponentType }>; exact?: boolean; - isActive?: ( - match: { path: string; url: string; isExact: boolean; params: Record }, - location: RouterLocation, - ) => boolean | null; + isActive?: (match: match, location: Location) => boolean; isDisabled?: boolean; onClick?: (event: React.SyntheticEvent) => void; replace?: boolean; strict?: boolean; - to: string | RouterLocation; + to: string | Location; } const NavButton = React.forwardRef( From 7ba08e8a8eec8599fe2c8c19435c78287c5f64f7 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 26 Feb 2025 19:05:58 +0000 Subject: [PATCH 3/8] fix(common): add index.js.flow for backward compatibility --- src/elements/common/nav-button/index.js | 2 ++ src/elements/common/nav-button/index.js.flow | 2 ++ 2 files changed, 4 insertions(+) create mode 100644 src/elements/common/nav-button/index.js create mode 100644 src/elements/common/nav-button/index.js.flow diff --git a/src/elements/common/nav-button/index.js b/src/elements/common/nav-button/index.js new file mode 100644 index 0000000000..e7cb60159d --- /dev/null +++ b/src/elements/common/nav-button/index.js @@ -0,0 +1,2 @@ +export { default as BackButton } from './BackButton'; +export { default } from './NavButton'; diff --git a/src/elements/common/nav-button/index.js.flow b/src/elements/common/nav-button/index.js.flow new file mode 100644 index 0000000000..e7cb60159d --- /dev/null +++ b/src/elements/common/nav-button/index.js.flow @@ -0,0 +1,2 @@ +export { default as BackButton } from './BackButton'; +export { default } from './NavButton'; From 7de658a6062d46fd73a14d29abc45d57a3d75179 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 27 Feb 2025 01:14:26 +0000 Subject: [PATCH 4/8] fix(common): address PR comments on index.js.flow --- src/elements/common/nav-button/index.js | 2 -- src/elements/common/nav-button/index.js.flow | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 src/elements/common/nav-button/index.js diff --git a/src/elements/common/nav-button/index.js b/src/elements/common/nav-button/index.js deleted file mode 100644 index e7cb60159d..0000000000 --- a/src/elements/common/nav-button/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as BackButton } from './BackButton'; -export { default } from './NavButton'; diff --git a/src/elements/common/nav-button/index.js.flow b/src/elements/common/nav-button/index.js.flow index e7cb60159d..b186704aee 100644 --- a/src/elements/common/nav-button/index.js.flow +++ b/src/elements/common/nav-button/index.js.flow @@ -1,2 +1,3 @@ +// @flow export { default as BackButton } from './BackButton'; export { default } from './NavButton'; From 00099e44e038f9add60fe7a74406e189f0caa9fe Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 27 Feb 2025 01:43:37 +0000 Subject: [PATCH 5/8] fix(common): fix Flow errors in nav-button component --- .../common/nav-button/BackButton.js.flow | 2 +- .../common/nav-button/NavButton.js.flow | 8 +- .../content-sidebar/SidebarNavButton.js.flow | 86 +++++++++++++++++ .../versions/StaticVersionSidebar.js.flow | 96 +++++++++++++++++++ .../versions/VersionsSidebar.js.flow | 83 ++++++++++++++++ 5 files changed, 273 insertions(+), 2 deletions(-) create mode 100644 src/elements/content-sidebar/SidebarNavButton.js.flow create mode 100644 src/elements/content-sidebar/versions/StaticVersionSidebar.js.flow create mode 100644 src/elements/content-sidebar/versions/VersionsSidebar.js.flow diff --git a/src/elements/common/nav-button/BackButton.js.flow b/src/elements/common/nav-button/BackButton.js.flow index a1431b87a1..bc64777613 100644 --- a/src/elements/common/nav-button/BackButton.js.flow +++ b/src/elements/common/nav-button/BackButton.js.flow @@ -15,7 +15,7 @@ import './BackButton.scss'; type Props = { className?: string, - to?: Location, + to?: Location | string, }; const BackButton = ({ className, to, ...rest }: Props) => ( diff --git a/src/elements/common/nav-button/NavButton.js.flow b/src/elements/common/nav-button/NavButton.js.flow index 5f3b0f936d..682005d306 100644 --- a/src/elements/common/nav-button/NavButton.js.flow +++ b/src/elements/common/nav-button/NavButton.js.flow @@ -11,6 +11,12 @@ import type { Match, Location } from 'react-router-dom'; import PlainButton from '../../../components/plain-button'; import { isLeftClick } from '../../../utils/dom'; +// Custom Location type that makes hash optional +type CustomLocation = { + ...Location, + hash?: string, +}; + type Props = { activeClassName?: string, children: React.Node, @@ -22,7 +28,7 @@ type Props = { onClick?: (event: SyntheticEvent<>) => void, replace?: boolean, strict?: boolean, - to: string | Location, + to: string | CustomLocation, }; const NavButton = React.forwardRef>((props: Props, ref: React.Ref) => { diff --git a/src/elements/content-sidebar/SidebarNavButton.js.flow b/src/elements/content-sidebar/SidebarNavButton.js.flow new file mode 100644 index 0000000000..67f150b87c --- /dev/null +++ b/src/elements/content-sidebar/SidebarNavButton.js.flow @@ -0,0 +1,86 @@ +/** + * @flow + * @file Preview sidebar nav button component + * @author Box + */ + +import * as React from 'react'; +import { Route } from 'react-router-dom'; +import noop from 'lodash/noop'; +import NavButton from '../common/nav-button'; +import Tooltip from '../../components/tooltip/Tooltip'; +import './SidebarNavButton.scss'; + +type Props = { + 'data-resin-target'?: string, + 'data-testid'?: string, + children: React.Node, + elementId?: string, + isDisabled?: boolean, + isOpen?: boolean, + onClick?: (sidebarView: string) => void, + sidebarView: string, + tooltip: React.Node, +}; + +const SidebarNavButton = React.forwardRef>((props: Props, ref: React.Ref) => { + const { + 'data-resin-target': dataResinTarget, + 'data-testid': dataTestId, + children, + elementId = '', + isDisabled, + isOpen, + onClick = noop, + sidebarView, + tooltip, + } = props; + const sidebarPath = `/${sidebarView}`; + + const handleNavButtonClick = () => { + onClick(sidebarView); + }; + + return ( + + {({ match }) => { + const isMatch = !!match; + const isActive = () => isMatch && !!isOpen; + const isActiveValue = isActive(); + const isExactMatch = isMatch && match.isExact; + const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`; + + return ( + + + {children} + + + ); + }} + + ); +}); + +export default SidebarNavButton; diff --git a/src/elements/content-sidebar/versions/StaticVersionSidebar.js.flow b/src/elements/content-sidebar/versions/StaticVersionSidebar.js.flow new file mode 100644 index 0000000000..c25454b9a6 --- /dev/null +++ b/src/elements/content-sidebar/versions/StaticVersionSidebar.js.flow @@ -0,0 +1,96 @@ +/** + * @flow + * @file Static Versions Sidebar component + * @author Box + */ + +import * as React from 'react'; +import { FormattedMessage } from 'react-intl'; + +import BoxDrive140 from '../../../illustration/BoxDrive140'; + +import { BackButton } from '../../common/nav-button'; +import PrimaryButton from '../../../components/primary-button'; +import { LoadingIndicatorWrapper } from '../../../components/loading-indicator'; +import VersionsMenu from './VersionsMenu'; + +import messages from './messages'; + +import './StaticVersionsSidebar.scss'; + +type Props = { + isLoading: boolean, + onUpgradeClick: () => void, + parentName: string, +}; + +const StaticVersionsSidebar = ({ isLoading, onUpgradeClick, parentName }: Props): React.Node => { + const versionTimestamp = new Date(); + versionTimestamp.setDate(versionTimestamp.getDate() - 1); + + const versions = ['1', '2', '3'].map(versionNumber => { + return { + id: versionNumber, + version_number: versionNumber, + type: 'file_version', + permissions: { + can_preview: true, + }, + created_at: versionTimestamp.toUTCString(), + modified_by: null, + size: 1875887, + trashed_at: null, + uploader_display_name: 'John Doe', + }; + }); + + return ( +
+
+

+ <> + + + +

+
+ +
+ + + +
+ +
+
+ +

+ +

+

+ +

+ + + +
+
+
+ ); +}; + +export default StaticVersionsSidebar; diff --git a/src/elements/content-sidebar/versions/VersionsSidebar.js.flow b/src/elements/content-sidebar/versions/VersionsSidebar.js.flow new file mode 100644 index 0000000000..513f83d2e1 --- /dev/null +++ b/src/elements/content-sidebar/versions/VersionsSidebar.js.flow @@ -0,0 +1,83 @@ +/** + * @flow + * @file Versions Sidebar component + * @author Box + */ + +import * as React from 'react'; +import { FormattedMessage } from 'react-intl'; +import type { MessageDescriptor } from 'react-intl'; +import InlineError from '../../../components/inline-error'; +import messages from './messages'; +import SidebarContent from '../SidebarContent'; +import VersionsMenu from './VersionsMenu'; +import { BackButton } from '../../common/nav-button'; +import { DEFAULT_FETCH_END } from '../../../constants'; +import { LoadingIndicatorWrapper } from '../../../components/loading-indicator'; +import type { BoxItemVersion } from '../../../common/types/core'; +import './VersionsSidebar.scss'; + +const MAX_VERSIONS = DEFAULT_FETCH_END; + +type Props = { + error?: MessageDescriptor, + fileId: string, + isLoading: boolean, + parentName: string, + versionCount: number, + versionLimit: number, + versions: Array, +}; + +const VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Props) => { + const showLimit = versions.length >= MAX_VERSIONS; + const showVersions = !!versions.length; + const showEmpty = !isLoading && !showVersions; + const showError = !!error; + + return ( + + + + + } + > + + {showError && ( + }> + + + )} + + {showEmpty && ( +
+ +
+ )} + + {showVersions && ( +
+ +
+ )} + {showLimit && ( +
+ +
+ )} + + + ); +}; + +export default VersionsSidebar; From a507ce70dbfdf05e6852c3e61fbf0ad81487897b Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 27 Feb 2025 02:05:38 +0000 Subject: [PATCH 6/8] fix(common): update BackButton.tsx to accept string or Location --- src/elements/common/nav-button/BackButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/common/nav-button/BackButton.tsx b/src/elements/common/nav-button/BackButton.tsx index 1a226c26c8..16784a9355 100644 --- a/src/elements/common/nav-button/BackButton.tsx +++ b/src/elements/common/nav-button/BackButton.tsx @@ -11,7 +11,7 @@ import './BackButton.scss'; export interface BackButtonProps { className?: string; - to?: Location; + to?: string | Location; } const BackButton = ({ className, to, ...rest }: BackButtonProps) => ( From 07bdc33bfa2efeb9643f14f140b76b1d1824dd53 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 27 Feb 2025 02:25:55 +0000 Subject: [PATCH 7/8] revert(common): revert Flow fixes in nav-button component --- .../common/nav-button/BackButton.js.flow | 2 +- .../common/nav-button/NavButton.js.flow | 8 +- .../content-sidebar/SidebarNavButton.js.flow | 86 ----------------- .../versions/StaticVersionSidebar.js.flow | 96 ------------------- .../versions/VersionsSidebar.js.flow | 83 ---------------- 5 files changed, 2 insertions(+), 273 deletions(-) delete mode 100644 src/elements/content-sidebar/SidebarNavButton.js.flow delete mode 100644 src/elements/content-sidebar/versions/StaticVersionSidebar.js.flow delete mode 100644 src/elements/content-sidebar/versions/VersionsSidebar.js.flow diff --git a/src/elements/common/nav-button/BackButton.js.flow b/src/elements/common/nav-button/BackButton.js.flow index bc64777613..a1431b87a1 100644 --- a/src/elements/common/nav-button/BackButton.js.flow +++ b/src/elements/common/nav-button/BackButton.js.flow @@ -15,7 +15,7 @@ import './BackButton.scss'; type Props = { className?: string, - to?: Location | string, + to?: Location, }; const BackButton = ({ className, to, ...rest }: Props) => ( diff --git a/src/elements/common/nav-button/NavButton.js.flow b/src/elements/common/nav-button/NavButton.js.flow index 682005d306..5f3b0f936d 100644 --- a/src/elements/common/nav-button/NavButton.js.flow +++ b/src/elements/common/nav-button/NavButton.js.flow @@ -11,12 +11,6 @@ import type { Match, Location } from 'react-router-dom'; import PlainButton from '../../../components/plain-button'; import { isLeftClick } from '../../../utils/dom'; -// Custom Location type that makes hash optional -type CustomLocation = { - ...Location, - hash?: string, -}; - type Props = { activeClassName?: string, children: React.Node, @@ -28,7 +22,7 @@ type Props = { onClick?: (event: SyntheticEvent<>) => void, replace?: boolean, strict?: boolean, - to: string | CustomLocation, + to: string | Location, }; const NavButton = React.forwardRef>((props: Props, ref: React.Ref) => { diff --git a/src/elements/content-sidebar/SidebarNavButton.js.flow b/src/elements/content-sidebar/SidebarNavButton.js.flow deleted file mode 100644 index 67f150b87c..0000000000 --- a/src/elements/content-sidebar/SidebarNavButton.js.flow +++ /dev/null @@ -1,86 +0,0 @@ -/** - * @flow - * @file Preview sidebar nav button component - * @author Box - */ - -import * as React from 'react'; -import { Route } from 'react-router-dom'; -import noop from 'lodash/noop'; -import NavButton from '../common/nav-button'; -import Tooltip from '../../components/tooltip/Tooltip'; -import './SidebarNavButton.scss'; - -type Props = { - 'data-resin-target'?: string, - 'data-testid'?: string, - children: React.Node, - elementId?: string, - isDisabled?: boolean, - isOpen?: boolean, - onClick?: (sidebarView: string) => void, - sidebarView: string, - tooltip: React.Node, -}; - -const SidebarNavButton = React.forwardRef>((props: Props, ref: React.Ref) => { - const { - 'data-resin-target': dataResinTarget, - 'data-testid': dataTestId, - children, - elementId = '', - isDisabled, - isOpen, - onClick = noop, - sidebarView, - tooltip, - } = props; - const sidebarPath = `/${sidebarView}`; - - const handleNavButtonClick = () => { - onClick(sidebarView); - }; - - return ( - - {({ match }) => { - const isMatch = !!match; - const isActive = () => isMatch && !!isOpen; - const isActiveValue = isActive(); - const isExactMatch = isMatch && match.isExact; - const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`; - - return ( - - - {children} - - - ); - }} - - ); -}); - -export default SidebarNavButton; diff --git a/src/elements/content-sidebar/versions/StaticVersionSidebar.js.flow b/src/elements/content-sidebar/versions/StaticVersionSidebar.js.flow deleted file mode 100644 index c25454b9a6..0000000000 --- a/src/elements/content-sidebar/versions/StaticVersionSidebar.js.flow +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @flow - * @file Static Versions Sidebar component - * @author Box - */ - -import * as React from 'react'; -import { FormattedMessage } from 'react-intl'; - -import BoxDrive140 from '../../../illustration/BoxDrive140'; - -import { BackButton } from '../../common/nav-button'; -import PrimaryButton from '../../../components/primary-button'; -import { LoadingIndicatorWrapper } from '../../../components/loading-indicator'; -import VersionsMenu from './VersionsMenu'; - -import messages from './messages'; - -import './StaticVersionsSidebar.scss'; - -type Props = { - isLoading: boolean, - onUpgradeClick: () => void, - parentName: string, -}; - -const StaticVersionsSidebar = ({ isLoading, onUpgradeClick, parentName }: Props): React.Node => { - const versionTimestamp = new Date(); - versionTimestamp.setDate(versionTimestamp.getDate() - 1); - - const versions = ['1', '2', '3'].map(versionNumber => { - return { - id: versionNumber, - version_number: versionNumber, - type: 'file_version', - permissions: { - can_preview: true, - }, - created_at: versionTimestamp.toUTCString(), - modified_by: null, - size: 1875887, - trashed_at: null, - uploader_display_name: 'John Doe', - }; - }); - - return ( -
-
-

- <> - - - -

-
- -
- - - -
- -
-
- -

- -

-

- -

- - - -
-
-
- ); -}; - -export default StaticVersionsSidebar; diff --git a/src/elements/content-sidebar/versions/VersionsSidebar.js.flow b/src/elements/content-sidebar/versions/VersionsSidebar.js.flow deleted file mode 100644 index 513f83d2e1..0000000000 --- a/src/elements/content-sidebar/versions/VersionsSidebar.js.flow +++ /dev/null @@ -1,83 +0,0 @@ -/** - * @flow - * @file Versions Sidebar component - * @author Box - */ - -import * as React from 'react'; -import { FormattedMessage } from 'react-intl'; -import type { MessageDescriptor } from 'react-intl'; -import InlineError from '../../../components/inline-error'; -import messages from './messages'; -import SidebarContent from '../SidebarContent'; -import VersionsMenu from './VersionsMenu'; -import { BackButton } from '../../common/nav-button'; -import { DEFAULT_FETCH_END } from '../../../constants'; -import { LoadingIndicatorWrapper } from '../../../components/loading-indicator'; -import type { BoxItemVersion } from '../../../common/types/core'; -import './VersionsSidebar.scss'; - -const MAX_VERSIONS = DEFAULT_FETCH_END; - -type Props = { - error?: MessageDescriptor, - fileId: string, - isLoading: boolean, - parentName: string, - versionCount: number, - versionLimit: number, - versions: Array, -}; - -const VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Props) => { - const showLimit = versions.length >= MAX_VERSIONS; - const showVersions = !!versions.length; - const showEmpty = !isLoading && !showVersions; - const showError = !!error; - - return ( - - - - - } - > - - {showError && ( - }> - - - )} - - {showEmpty && ( -
- -
- )} - - {showVersions && ( -
- -
- )} - {showLimit && ( -
- -
- )} - - - ); -}; - -export default VersionsSidebar; From 18c007caf76dc04c1b4040754fb1307f4044011f Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 27 Feb 2025 02:35:00 +0000 Subject: [PATCH 8/8] fix(common): update Flow types in nav-button component --- src/elements/common/nav-button/BackButton.js.flow | 2 +- src/elements/common/nav-button/NavButton.js.flow | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/elements/common/nav-button/BackButton.js.flow b/src/elements/common/nav-button/BackButton.js.flow index a1431b87a1..bc64777613 100644 --- a/src/elements/common/nav-button/BackButton.js.flow +++ b/src/elements/common/nav-button/BackButton.js.flow @@ -15,7 +15,7 @@ import './BackButton.scss'; type Props = { className?: string, - to?: Location, + to?: Location | string, }; const BackButton = ({ className, to, ...rest }: Props) => ( diff --git a/src/elements/common/nav-button/NavButton.js.flow b/src/elements/common/nav-button/NavButton.js.flow index 5f3b0f936d..682005d306 100644 --- a/src/elements/common/nav-button/NavButton.js.flow +++ b/src/elements/common/nav-button/NavButton.js.flow @@ -11,6 +11,12 @@ import type { Match, Location } from 'react-router-dom'; import PlainButton from '../../../components/plain-button'; import { isLeftClick } from '../../../utils/dom'; +// Custom Location type that makes hash optional +type CustomLocation = { + ...Location, + hash?: string, +}; + type Props = { activeClassName?: string, children: React.Node, @@ -22,7 +28,7 @@ type Props = { onClick?: (event: SyntheticEvent<>) => void, replace?: boolean, strict?: boolean, - to: string | Location, + to: string | CustomLocation, }; const NavButton = React.forwardRef>((props: Props, ref: React.Ref) => {