refactor(content-picker): convert Content to TypeScript by devin-ai-integration[bot] · Pull Request #3944 · box/box-ui-elements

devin-ai-integration · 2025-02-20T20:14:57Z

Description

Converted Content.js to TypeScript in the content-picker element.

Changes made:

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

- 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

devin-ai-integration · 2025-02-20T20:15:01Z

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

Address comments on this PR. Add "(aside)" to your comment to have me ignore it.
Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

Disable automatic comment and CI monitoring

tjuanitas · 2025-02-20T20:16:45Z

src/elements/content-picker/Content.tsx

 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';


Can you sort this?

Suggested change

import { View, Collection } from '../../common/types/core';

import { Collection, View } from '../../common/types/core';

tjuanitas · 2025-02-20T20:16:51Z

src/elements/content-picker/Content.tsx

- *
- * @param {string} view the current view
- * @param {Object} currentCollection the current collection
- * @return {boolean} empty or not


Please revert this change.

Devin please revert this change

- Sort imports alphabetically - Restore JSDoc comments

tjuanitas

don't merge this yet, as the JS component could be useful for testing. however, it looks good and doesn't require any more changes.

tjuanitas · 2025-02-20T22:46:22Z

src/elements/content-picker/Content.tsx

+/**
+ * @flow
+ * @file File picker header and list component
+ * @author Box
+ */
+


Please delete this comment, you don't need the header comment at the top of the file

tjuanitas · 2025-02-20T22:49:59Z

src/elements/content-picker/Content.js.flow

@@ -68,24 +65,22 @@ const Content = ({
            <ProgressBar percent={currentCollection.percentLoaded} />
        )}
        {isEmpty(view, currentCollection) ? (
-            <EmptyView view={view} isLoading={currentCollection.percentLoaded !== 100} />


why did you make this change?

tjuanitas · 2025-02-20T22:53:05Z

src/elements/content-picker/Content.js.flow

+    canSetShareAccess,
    onItemSelect,
+    onItemClick,
    onShareAccessChange,


please revert these changes

tjuanitas · 2025-02-20T22:53:52Z

src/elements/content-picker/Content.js.flow

-                onFocusChange={onFocusChange}
                onShareAccessChange={onShareAccessChange}
+                onFocusChange={onFocusChange}
                extensionsWhitelist={extensionsWhitelist}


please revert these changes

tjuanitas · 2025-02-20T22:54:22Z

src/elements/content-picker/Content.js.flow

 */

 import * as React from 'react';
-// $FlowFixMe TypeScript file


revert this change

tjuanitas · 2025-02-20T22:55:56Z

src/elements/content-picker/Content.tsx

+    view,
+    rootId,
+    isSmall,
+    rootElement,
+    focusedRow,
+    hasHitSelectionLimit,
+    selectableType,
+    currentCollection,
+    tableRef,
+    canSetShareAccess,
+    isSingleSelect,
+    onItemClick,
+    onItemSelect,
+    onShareAccessChange,
+    onFocusChange,
+    extensionsWhitelist,


can you sort this list alphabetically?

tjuanitas · 2025-02-20T22:56:13Z

src/elements/content-picker/Content.tsx

+                view={view}
+                rootId={rootId}
+                isSmall={isSmall}
+                rootElement={rootElement}
+                focusedRow={focusedRow}
+                currentCollection={currentCollection}
+                tableRef={tableRef}
+                canSetShareAccess={canSetShareAccess}
+                hasHitSelectionLimit={hasHitSelectionLimit}
+                isSingleSelect={isSingleSelect}
+                selectableType={selectableType}
+                onItemSelect={onItemSelect}
+                onItemClick={onItemClick}
+                onFocusChange={onFocusChange}
+                onShareAccessChange={onShareAccessChange}
+                extensionsWhitelist={extensionsWhitelist}


can you sort these props alphabetically?

tjuanitas · 2025-02-20T22:56:27Z

src/elements/content-picker/Content.tsx

+            <ProgressBar percent={currentCollection.percentLoaded} />
+        )}
+        {isEmpty(view, currentCollection) ? (
+            <EmptyView view={view} isLoading={currentCollection.percentLoaded !== 100} />


can you sort the props alphabetically?

Suggested change

<EmptyView view={view} isLoading={currentCollection.percentLoaded !== 100} />

<EmptyView isLoading={currentCollection.percentLoaded !== 100} view={view} />

devin-ai-integration · 2025-02-21T03:01:40Z

Line-by-Line Comparison between Content.tsx and Content.js.flow

File Header Changes (lines 1-5 in .js.flow removed):
- Removed Flow header comment block
```
/**
 * @flow
 * @file File picker header and list component
 * @author Box
 */
```
Import Changes (lines 1-8):
- Line 2: Removed Flow comment // TypeScript file
- Line 6: Changed import type { View, Collection } to import { Collection, View }
- Reordered imports alphabetically
Type Definition Changes (lines 10-27):
- Changed type Props = { to export interface ContentProps {
- Changed comma separators to semicolons
- Added specific function types:
  - onFocusChange: Function → onFocusChange: (row: number) => void
  - onItemClick: Function → onItemClick: (item: Record<string, unknown>) => void
  - onItemSelect: Function → onItemSelect: (item: Record<string, unknown>) => void
  - onShareAccessChange: Function → onShareAccessChange: (access: string) => void
  - tableRef: Function → tableRef: (ref: HTMLElement) => void
isEmpty Function Changes (lines 36-39):
- Changed function isEmpty to const isEmpty =
- Added arrow function syntax
- Added explicit return type annotation : boolean =>
Content Component Changes (lines 41-86):
- Added explicit return type : React.ReactElement
- Reordered props alphabetically in both the destructuring and JSX
- Changed Props type to ContentProps in parameter type annotation
- Reordered EmptyView props alphabetically
- Reordered ItemList props alphabetically

The main structural changes were:

Removal of Flow-specific syntax and comments
Addition of more specific TypeScript type annotations
Consistent alphabetical ordering of props
Conversion to TypeScript interface syntax
Addition of explicit return types

devin-ai-integration · 2025-02-21T03:02:00Z

Line-by-Line Comparison between Content.tsx and Content.js.flow (Part 1)

File Header Changes (lines 1-5 in .js.flow removed):
- Removed Flow header comment block
```
/**
 * @flow
 * @file File picker header and list component
 * @author Box
 */
```
Import Changes (lines 1-8):
- Line 2: Removed Flow comment // TypeScript file
- Line 6: Changed import type { View, Collection } to import { Collection, View }
- Reordered imports alphabetically

devin-ai-integration · 2025-02-21T03:02:01Z

Line-by-Line Comparison (Part 2)

Type Definition Changes (lines 10-27):
- Changed type Props = { to export interface ContentProps {
- Changed comma separators to semicolons
- Added specific function types:
  - onFocusChange: Function → onFocusChange: (row: number) => void
  - onItemClick: Function → onItemClick: (item: Record<string, unknown>) => void
  - onItemSelect: Function → onItemSelect: (item: Record<string, unknown>) => void
  - onShareAccessChange: Function → onShareAccessChange: (access: string) => void
  - tableRef: Function → tableRef: (ref: HTMLElement) => void

devin-ai-integration · 2025-02-21T03:02:03Z

Line-by-Line Comparison (Part 3)

isEmpty Function Changes (lines 36-39):
- Changed function isEmpty to const isEmpty =
- Added arrow function syntax
- Added explicit return type annotation : boolean =>
Content Component Changes (lines 41-86):
- Added explicit return type : React.ReactElement
- Reordered props alphabetically in both the destructuring and JSX
- Changed Props type to ContentProps in parameter type annotation
- Reordered EmptyView props alphabetically
- Reordered ItemList props alphabetically

devin-ai-integration · 2025-02-21T03:02:04Z

Line-by-Line Comparison (Summary)

The main structural changes were:

Removal of Flow-specific syntax and comments
Addition of more specific TypeScript type annotations
Consistent alphabetical ordering of props
Conversion to TypeScript interface syntax
Addition of explicit return types

devin-ai-integration · 2025-03-01T16:37:56Z

Closing due to inactivity.

devin-ai-integration bot requested a review from a team as a code owner February 20, 2025 20:14

tjuanitas reviewed Feb 20, 2025

View reviewed changes

refactor(content-picker): address PR feedback

6e46165

- Sort imports alphabetically - Restore JSDoc comments

tjuanitas previously approved these changes Feb 20, 2025

View reviewed changes

refactor(content-picker): restore JSDoc comments

bdfb65d

devin-ai-integration bot dismissed tjuanitas’s stale review via bdfb65d February 20, 2025 20:23

devin-ai-integration bot added 2 commits February 20, 2025 21:43

refactor(content-picker): restore file header and JSDoc comments

2dce2af

refactor(content-picker): add Flow type definitions

faa39dd

tjuanitas reviewed Feb 20, 2025

View reviewed changes

refactor(content-picker): remove Flow header comment

0bcab24

tjuanitas reviewed Feb 20, 2025

View reviewed changes

devin-ai-integration bot added 2 commits February 20, 2025 22:59

fix(content-picker): restore EmptyView props for loading state

e217da9

fix(content-picker): alphabetize EmptyView props

a0e4175

tjuanitas approved these changes Feb 21, 2025

View reviewed changes

devin-ai-integration bot closed this Mar 1, 2025

tjuanitas reopened this May 22, 2025

	import { View, Collection } from '../../common/types/core';
	import { Collection, View } from '../../common/types/core';

	<EmptyView view={view} isLoading={currentCollection.percentLoaded !== 100} />
	<EmptyView isLoading={currentCollection.percentLoaded !== 100} view={view} />

Conversation

devin-ai-integration bot commented Feb 20, 2025

Description

Uh oh!

devin-ai-integration bot commented Feb 20, 2025

🤖 Devin AI Engineer

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tjuanitas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration bot commented Feb 21, 2025

Line-by-Line Comparison between Content.tsx and Content.js.flow

Uh oh!

devin-ai-integration bot commented Feb 21, 2025

Line-by-Line Comparison between Content.tsx and Content.js.flow (Part 1)

Uh oh!

devin-ai-integration bot commented Feb 21, 2025

Line-by-Line Comparison (Part 2)

Uh oh!

devin-ai-integration bot commented Feb 21, 2025

Line-by-Line Comparison (Part 3)

Uh oh!

devin-ai-integration bot commented Feb 21, 2025

Line-by-Line Comparison (Summary)

Uh oh!

devin-ai-integration bot commented Mar 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant