From 1a0f7f09fa98e56254ac8a457ba8fc350e4ec600 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 20 Feb 2025 20:12:13 +0000 Subject: [PATCH 1/8] refactor(content-picker): convert Content to TypeScript - Renamed Content.js to Content.tsx - Converted Flow types to TypeScript interfaces - Improved type safety with proper function signatures - Removed Flow comments and simplified JSDoc Link to Devin run: https://app.devin.ai/sessions/848dfdad3fe447138f3a218f3058e660 Requested by: tjuanitas@box.com --- .../{Content.js => Content.tsx} | 55 ++++++++----------- 1 file changed, 22 insertions(+), 33 deletions(-) rename src/elements/content-picker/{Content.js => Content.tsx} (68%) diff --git a/src/elements/content-picker/Content.js b/src/elements/content-picker/Content.tsx similarity index 68% rename from src/elements/content-picker/Content.js rename to src/elements/content-picker/Content.tsx index 4211fd6552..35ffae1b2d 100644 --- a/src/elements/content-picker/Content.js +++ b/src/elements/content-picker/Content.tsx @@ -1,49 +1,38 @@ -/** - * @flow - * @file File picker header and list component - * @author Box - */ - import * as React from 'react'; -// $FlowFixMe TypeScript file import EmptyView from '../common/empty-view'; import ProgressBar from '../common/progress-bar'; import ItemList from './ItemList'; import { VIEW_ERROR, VIEW_SELECTED } from '../../constants'; -import type { View, Collection } from '../../common/types/core'; +import { View, Collection } from '../../common/types/core'; import './Content.scss'; -type Props = { - canSetShareAccess: boolean, - currentCollection: Collection, - extensionsWhitelist: string[], - focusedRow: number, - hasHitSelectionLimit: boolean, - isSingleSelect: boolean, - isSmall: boolean, - onFocusChange: Function, - onItemClick: Function, - onItemSelect: Function, - onShareAccessChange: Function, - rootElement?: HTMLElement, - rootId: string, - selectableType: string, - tableRef: Function, - view: View, -}; +export interface ContentProps { + canSetShareAccess: boolean; + currentCollection: Collection; + extensionsWhitelist: string[]; + focusedRow: number; + hasHitSelectionLimit: boolean; + isSingleSelect: boolean; + isSmall: boolean; + onFocusChange: (row: number) => void; + onItemClick: (item: Record) => void; + onItemSelect: (item: Record) => void; + onShareAccessChange: (access: string) => void; + rootElement?: HTMLElement; + rootId: string; + selectableType: string; + tableRef: (ref: HTMLElement) => void; + view: View; +} /** * Determines if we should show the empty state - * - * @param {string} view the current view - * @param {Object} currentCollection the current collection - * @return {boolean} empty or not */ -function isEmpty(view: View, currentCollection: Collection): boolean { +const isEmpty = (view: View, currentCollection: Collection): boolean => { const { items = [] } = currentCollection; return view === VIEW_ERROR || items.length === 0; -} +}; const Content = ({ view, @@ -62,7 +51,7 @@ const Content = ({ onShareAccessChange, onFocusChange, extensionsWhitelist, -}: Props) => ( +}: ContentProps): React.ReactElement => (
{view === VIEW_ERROR || view === VIEW_SELECTED ? null : ( From 6e4616541933a638107c07bec3935defc1b07e9b Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 20 Feb 2025 20:17:33 +0000 Subject: [PATCH 2/8] refactor(content-picker): address PR feedback - Sort imports alphabetically - Restore JSDoc comments --- src/elements/content-picker/Content.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/elements/content-picker/Content.tsx b/src/elements/content-picker/Content.tsx index 35ffae1b2d..8cf4eb169b 100644 --- a/src/elements/content-picker/Content.tsx +++ b/src/elements/content-picker/Content.tsx @@ -3,7 +3,7 @@ import EmptyView from '../common/empty-view'; import ProgressBar from '../common/progress-bar'; import ItemList from './ItemList'; import { VIEW_ERROR, VIEW_SELECTED } from '../../constants'; -import { View, Collection } from '../../common/types/core'; +import { Collection, View } from '../../common/types/core'; import './Content.scss'; @@ -28,6 +28,10 @@ export interface ContentProps { /** * Determines if we should show the empty state + * + * @param {string} view the current view + * @param {Object} currentCollection the current collection + * @return {boolean} empty or not */ const isEmpty = (view: View, currentCollection: Collection): boolean => { const { items = [] } = currentCollection; From bdfb65d5656222712bfca2a491a5018d4206796a Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 20 Feb 2025 20:22:47 +0000 Subject: [PATCH 3/8] refactor(content-picker): restore JSDoc comments --- src/elements/content-picker/Content.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/elements/content-picker/Content.tsx b/src/elements/content-picker/Content.tsx index 8cf4eb169b..58db46a1ef 100644 --- a/src/elements/content-picker/Content.tsx +++ b/src/elements/content-picker/Content.tsx @@ -28,10 +28,6 @@ export interface ContentProps { /** * Determines if we should show the empty state - * - * @param {string} view the current view - * @param {Object} currentCollection the current collection - * @return {boolean} empty or not */ const isEmpty = (view: View, currentCollection: Collection): boolean => { const { items = [] } = currentCollection; From 2dce2afaafaf94ca7b41f536d3627d6ede81443c Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 20 Feb 2025 21:43:24 +0000 Subject: [PATCH 4/8] refactor(content-picker): restore file header and JSDoc comments --- src/elements/content-picker/Content.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/elements/content-picker/Content.tsx b/src/elements/content-picker/Content.tsx index 58db46a1ef..26b01c8bd5 100644 --- a/src/elements/content-picker/Content.tsx +++ b/src/elements/content-picker/Content.tsx @@ -1,3 +1,9 @@ +/** + * @flow + * @file File picker header and list component + * @author Box + */ + import * as React from 'react'; import EmptyView from '../common/empty-view'; import ProgressBar from '../common/progress-bar'; @@ -28,6 +34,10 @@ export interface ContentProps { /** * Determines if we should show the empty state + * + * @param {string} view the current view + * @param {Object} currentCollection the current collection + * @return {boolean} empty or not */ const isEmpty = (view: View, currentCollection: Collection): boolean => { const { items = [] } = currentCollection; From faa39dd2f78de18cda6a939f32917d22e10e497f Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 20 Feb 2025 21:46:18 +0000 Subject: [PATCH 5/8] refactor(content-picker): add Flow type definitions --- src/elements/content-picker/Content.js.flow | 90 +++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 src/elements/content-picker/Content.js.flow diff --git a/src/elements/content-picker/Content.js.flow b/src/elements/content-picker/Content.js.flow new file mode 100644 index 0000000000..3fe73f61a5 --- /dev/null +++ b/src/elements/content-picker/Content.js.flow @@ -0,0 +1,90 @@ +/** + * @flow + * @file File picker header and list component + * @author Box + */ + +import * as React from 'react'; +import EmptyView from '../common/empty-view'; +import ProgressBar from '../common/progress-bar'; +import ItemList from './ItemList'; +import { VIEW_ERROR, VIEW_SELECTED } from '../../constants'; +import type { View, Collection } from '../../common/types/core'; + +import './Content.scss'; + +type Props = { + canSetShareAccess: boolean, + currentCollection: Collection, + extensionsWhitelist: string[], + focusedRow: number, + hasHitSelectionLimit: boolean, + isSingleSelect: boolean, + isSmall: boolean, + onFocusChange: Function, + onItemClick: Function, + onItemSelect: Function, + onShareAccessChange: Function, + rootElement?: HTMLElement, + rootId: string, + selectableType: string, + tableRef: Function, + view: View, +}; + +/** + * Determines if we should show the empty state + * + * @param {string} view the current view + * @param {Object} currentCollection the current collection + * @return {boolean} empty or not + */ +function isEmpty(view: View, currentCollection: Collection): boolean { + const { items = [] } = currentCollection; + return view === VIEW_ERROR || items.length === 0; +} + +const Content = ({ + view, + rootId, + rootElement, + currentCollection, + tableRef, + isSmall, + isSingleSelect, + hasHitSelectionLimit, + canSetShareAccess, + onItemSelect, + onItemClick, + onShareAccessChange, + onFocusChange, + extensionsWhitelist, +}: Props) => ( +
+ {view === VIEW_ERROR || view === VIEW_SELECTED ? null : ( + + )} + {isEmpty(view, currentCollection) ? ( + + ) : ( + + )} +
+); + +export default Content; From 0bcab24ff4b7e82d7b2fcf32ac90376b22990c23 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 20 Feb 2025 22:47:35 +0000 Subject: [PATCH 6/8] refactor(content-picker): remove Flow header comment --- src/elements/content-picker/Content.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/elements/content-picker/Content.tsx b/src/elements/content-picker/Content.tsx index 26b01c8bd5..8cf4eb169b 100644 --- a/src/elements/content-picker/Content.tsx +++ b/src/elements/content-picker/Content.tsx @@ -1,9 +1,3 @@ -/** - * @flow - * @file File picker header and list component - * @author Box - */ - import * as React from 'react'; import EmptyView from '../common/empty-view'; import ProgressBar from '../common/progress-bar'; From e217da970f6a0618b69fce8a2dfbf9daede3b5b9 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 20 Feb 2025 22:59:23 +0000 Subject: [PATCH 7/8] fix(content-picker): restore EmptyView props for loading state --- src/elements/content-picker/Content.js.flow | 23 ++++++----- src/elements/content-picker/Content.tsx | 42 ++++++++++----------- 2 files changed, 35 insertions(+), 30 deletions(-) diff --git a/src/elements/content-picker/Content.js.flow b/src/elements/content-picker/Content.js.flow index 3fe73f61a5..4211fd6552 100644 --- a/src/elements/content-picker/Content.js.flow +++ b/src/elements/content-picker/Content.js.flow @@ -5,6 +5,7 @@ */ import * as React from 'react'; +// $FlowFixMe TypeScript file import EmptyView from '../common/empty-view'; import ProgressBar from '../common/progress-bar'; import ItemList from './ItemList'; @@ -47,15 +48,17 @@ function isEmpty(view: View, currentCollection: Collection): boolean { const Content = ({ view, rootId, + isSmall, rootElement, + focusedRow, + hasHitSelectionLimit, + selectableType, currentCollection, tableRef, - isSmall, - isSingleSelect, - hasHitSelectionLimit, canSetShareAccess, - onItemSelect, + isSingleSelect, onItemClick, + onItemSelect, onShareAccessChange, onFocusChange, extensionsWhitelist, @@ -65,22 +68,24 @@ const Content = ({ )} {isEmpty(view, currentCollection) ? ( - + ) : ( )} diff --git a/src/elements/content-picker/Content.tsx b/src/elements/content-picker/Content.tsx index 8cf4eb169b..e78f98d4ff 100644 --- a/src/elements/content-picker/Content.tsx +++ b/src/elements/content-picker/Content.tsx @@ -39,22 +39,22 @@ const isEmpty = (view: View, currentCollection: Collection): boolean => { }; const Content = ({ - view, - rootId, - isSmall, - rootElement, + canSetShareAccess, + currentCollection, + extensionsWhitelist, focusedRow, hasHitSelectionLimit, - selectableType, - currentCollection, - tableRef, - canSetShareAccess, isSingleSelect, + isSmall, + onFocusChange, onItemClick, onItemSelect, onShareAccessChange, - onFocusChange, - extensionsWhitelist, + rootElement, + rootId, + selectableType, + tableRef, + view, }: ContentProps): React.ReactElement => (
{view === VIEW_ERROR || view === VIEW_SELECTED ? null : ( @@ -64,22 +64,22 @@ const Content = ({ ) : ( )}
From a0e4175ed2463e0957da5d54d136ebf96e1fe605 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 21 Feb 2025 02:32:54 +0000 Subject: [PATCH 8/8] fix(content-picker): alphabetize EmptyView props --- src/elements/content-picker/Content.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/content-picker/Content.tsx b/src/elements/content-picker/Content.tsx index e78f98d4ff..527d39aa9c 100644 --- a/src/elements/content-picker/Content.tsx +++ b/src/elements/content-picker/Content.tsx @@ -61,7 +61,7 @@ const Content = ({ )} {isEmpty(view, currentCollection) ? ( - + ) : (