Skip to content

Commit e92ba45

Browse files
greg-in-a-boxgreg-in-a-box
committed
feat(metadata-view): Add MetadataView V2
1 parent 1506020 commit e92ba45

File tree

17 files changed

+1905
-68
lines changed

17 files changed

+1905
-68
lines changed

‎package.json‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -124,17 +124,20 @@
124124
"@babel/preset-typescript": "^7.24.7",
125125
"@babel/template": "^7.24.7",
126126
"@babel/types": "^7.24.7",
127-
"@box/blueprint-web": "^12.7.1",
128-
"@box/blueprint-web-assets": "^4.60.0",
127+
"@box/blueprint-web": "^12.41.0",
128+
"@box/blueprint-web-assets": "^4.60.9",
129129
"@box/box-ai-agent-selector": "^0.41.10",
130130
"@box/box-ai-content-answers": "^0.124.1",
131131
"@box/cldr-data": "^34.2.0",
132132
"@box/combobox-with-api": "^0.34.9",
133133
"@box/frontend": "^11.0.1",
134-
"@box/item-icon": "^0.9.83",
134+
"@box/item-icon": "^0.16.3",
135135
"@box/languages": "^1.0.0",
136136
"@box/metadata-editor": "^0.122.0",
137+
"@box/metadata-filter": "^1.16.3",
138+
"@box/metadata-view": "^0.28.0",
137139
"@box/react-virtualized": "^9.22.3-rc-box.10",
140+
"@box/types": "^0.2.1",
138141
"@cfaester/enzyme-adapter-react-18": "^0.8.0",
139142
"@chromatic-com/storybook": "^4.0.1",
140143
"@commitlint/cli": "^19.8.0",
@@ -149,6 +152,7 @@
149152
"@storybook/addon-styling-webpack": "^2.0.0",
150153
"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
151154
"@storybook/react-webpack5": "^9.0.14",
155+
"@tanstack/react-virtual": "^3.13.12",
152156
"@testing-library/dom": "^10.4.0",
153157
"@testing-library/jest-dom": "^6.4.6",
154158
"@testing-library/react": "^16.0.0",
@@ -243,6 +247,7 @@
243247
"query-string": "5.1.1",
244248
"react": "^18.3.1",
245249
"react-animate-height": "^3.2.3",
250+
"react-aria-components": "^1.10.1",
246251
"react-beautiful-dnd": "^13.1.1",
247252
"react-docgen-typescript": "^1.16.1",
248253
"react-docgen-typescript-loader": "^3.6.0",
@@ -287,16 +292,21 @@
287292
"webpack-dev-server": "^5.2.1"
288293
},
289294
"peerDependencies": {
290-
"@box/blueprint-web": "^12.7.1",
291-
"@box/blueprint-web-assets": "^4.60.0",
295+
"@box/blueprint-web": "^12.41.0",
296+
"@box/blueprint-web-assets": "^4.60.9",
292297
"@box/box-ai-agent-selector": "^0.41.10",
293298
"@box/box-ai-content-answers": "^0.124.1",
294299
"@box/cldr-data": ">=34.2.0",
295300
"@box/combobox-with-api": "^0.34.9",
296-
"@box/item-icon": "^0.9.83",
301+
"@box/item-icon": "^0.16.3",
302+
"@box/languages": "^1.0.0",
297303
"@box/metadata-editor": "^0.122.0",
304+
"@box/metadata-filter": "^1.16.3",
305+
"@box/metadata-view": "^0.28.0",
298306
"@box/react-virtualized": "^9.22.3-rc-box.10",
307+
"@box/types": "^0.2.1",
299308
"@hapi/address": "^2.1.4",
309+
"@tanstack/react-virtual": "^3.13.12",
300310
"axios": "^0.30.0",
301311
"classnames": "^2.2.5",
302312
"color": "^3.1.2",
@@ -317,6 +327,7 @@
317327
"query-string": "5.1.1",
318328
"react": "^17.0.1 || ^18.0.0",
319329
"react-animate-height": "^3.2.3",
330+
"react-aria-components": "^1.10.1",
320331
"react-beautiful-dnd": "^13.1.1",
321332
"react-dom": "^17.0.1 || ^18.0.0",
322333
"react-draggable": "^4.4.6",

‎scripts/i18n.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,7 @@ module.exports = {
55
'@box/box-ai-content-answers',
66
'@box/item-icon',
77
'@box/metadata-editor',
8+
'@box/metadata-filter',
9+
'@box/metadata-view',
810
],
911
};

‎scripts/jest/jest.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,6 @@ module.exports = {
2626
testMatch: ['**/__tests__/**/*.test.+(js|jsx|ts|tsx)'],
2727
testPathIgnorePatterns: ['stories.test.js$', 'stories.test.tsx$', 'stories.test.d.ts'],
2828
transformIgnorePatterns: [
29-
'node_modules/(?!(@box/react-virtualized/dist/es|@box/cldr-data|@box/blueprint-web|@box/blueprint-web-assets|@box/metadata-editor|@box/box-ai-content-answers|@box/box-ai-agent-selector|@box/item-icon|@box/combobox-with-api|@box/tree)/)',
29+
'node_modules/(?!(@box/react-virtualized/dist/es|@box/cldr-data|@box/blueprint-web|@box/blueprint-web-assets|@box/metadata-editor|@box/box-ai-content-answers|@box/box-ai-agent-selector|@box/item-icon|@box/combobox-with-api|@box/tree|@box/metadata-filter|@box/metadata-view|@box/types)/)',
3030
],
3131
};

‎src/common/types/core.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
PERMISSION_CAN_PREVIEW,
3636
} from '../../constants';
3737
import type { MetadataType } from './metadata';
38+
import { MetadataTemplate } from './metadata';
3839

3940
type Token = null | typeof undefined | string | Function;
4041
type TokenReadWrite = { read: string, write?: string };
@@ -394,6 +395,7 @@ type Collection = {
394395
breadcrumbs?: Array<Crumb>,
395396
id?: string,
396397
items?: Array<BoxItem>,
398+
metadataTemplate?: MetadataTemplate,
397399
name?: string,
398400
nextMarker?: ?string,
399401
offset?: number,

‎src/elements/common/__mocks__/mockMetadata.ts‎

Lines changed: 97 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
const mockMetadata = {
22
entries: [
33
{
4-
name: 'File1',
5-
etag: '2',
4+
extension: 'pdf',
65
metadata: {
76
enterprise_0: {
87
templateName: {
@@ -13,17 +12,18 @@ const mockMetadata = {
1312
name: 'something',
1413
industry: 'Technology',
1514
last_contacted_at: '2023-11-16T00:00:00.000Z',
16-
$version: 6,
15+
$version: 9,
1716
},
1817
},
1918
},
20-
id: '1188899160835',
21-
modified_at: '2023-04-12T10:06:04-07:00',
19+
name: 'Child 2 of metadata folder.pdf',
20+
created_at: '2023-04-12T10:06:04-07:00',
21+
etag: '3',
22+
id: '1188890835',
2223
type: 'file',
2324
},
2425
{
25-
name: 'File2',
26-
etag: '1',
26+
extension: 'pdf',
2727
metadata: {
2828
enterprise_0: {
2929
templateName: {
@@ -32,31 +32,113 @@ const mockMetadata = {
3232
$template: 'templateName',
3333
$parent: 'file_1318276254035',
3434
name: '1',
35-
industry: 'Healthcare',
35+
industry: 'Technology',
3636
last_contacted_at: '2023-11-01T00:00:00.000Z',
37+
$version: 3,
38+
},
39+
},
40+
},
41+
name: 'Child 1 of metadata folder.pdf',
42+
created_at: '2023-09-26T14:04:52-07:00',
43+
etag: '2',
44+
id: '13182754035',
45+
type: 'file',
46+
},
47+
{
48+
extension: 'pdf',
49+
metadata: {
50+
enterprise_0: {
51+
templateName: {
52+
$scope: 'enterprise_0',
53+
role: ['Developer', 'Business Owner'],
54+
$template: 'templateName',
55+
$parent: 'file_1812488409191',
56+
industry: 'Legal',
57+
last_contacted_at: '2025-03-05T00:00:00.000Z',
3758
$version: 1,
3859
},
3960
},
4061
},
41-
id: '1318276254035',
42-
modified_at: '2023-09-26T14:04:52-07:00',
62+
name: 'Child of Folder 1.pdf',
63+
created_at: '2025-03-24T11:19:06-07:00',
64+
etag: '2',
65+
id: '18124889191',
66+
type: 'file',
67+
},
68+
{
69+
extension: 'pdf',
70+
metadata: {
71+
enterprise_0: {
72+
templateName: {
73+
$scope: 'enterprise_0',
74+
role: ['Legal', 'Marketing'],
75+
$template: 'templateName',
76+
$parent: 'file_1812500610112',
77+
industry: 'Legal',
78+
last_contacted_at: '2025-03-11T00:00:00.000Z',
79+
$version: 3,
80+
},
81+
},
82+
},
83+
name: 'Child 1 of metadata folder 2.pdf',
84+
created_at: '2025-03-24T11:38:55-07:00',
85+
etag: '1',
86+
id: '18125010112',
87+
type: 'file',
88+
},
89+
{
90+
extension: 'pdf',
91+
metadata: {
92+
enterprise_0: {
93+
templateName: {
94+
$scope: 'enterprise_0',
95+
$template: 'templateName',
96+
$parent: 'file_1812508470016',
97+
name: 'in folder 3 that doesnt have metadata',
98+
$version: 0,
99+
},
100+
},
101+
},
102+
name: 'Child 1 of folder 3.pdf',
103+
created_at: '2025-03-24T11:50:52-07:00',
104+
etag: '2',
105+
id: '18125470016',
43106
type: 'file',
44107
},
45108
{
46-
name: 'File3',
47-
etag: '0',
109+
name: 'Folder 1 with metadata',
110+
created_at: '2025-03-24T11:18:44-07:00',
111+
etag: '2',
48112
metadata: {
49113
enterprise_0: {
50114
templateName: {
51115
$scope: 'enterprise_0',
52116
$template: 'templateName',
53-
$parent: 'folder_218662304788',
117+
$parent: 'folder_313222720346',
118+
industry: 'Technology',
119+
$version: 1,
120+
},
121+
},
122+
},
123+
id: '3132220346',
124+
type: 'folder',
125+
},
126+
{
127+
name: 'Folder 2 with metadata',
128+
created_at: '2025-03-24T11:37:27-07:00',
129+
etag: '1',
130+
metadata: {
131+
enterprise_0: {
132+
templateName: {
133+
$scope: 'enterprise_0',
134+
$template: 'templateName',
135+
$parent: 'folder_313225735088',
136+
industry: 'Healthcare',
54137
$version: 0,
55138
},
56139
},
57140
},
58-
id: '218662304788',
59-
modified_at: '2024-06-13T15:53:23-07:00',
141+
id: '3135735088',
60142
type: 'folder',
61143
},
62144
],

‎src/elements/content-explorer/Content.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ItemGrid from '../common/item-grid';
44
import ItemList from '../common/item-list';
55
import ProgressBar from '../common/progress-bar';
66
import MetadataBasedItemList from '../../features/metadata-based-view';
7-
import MetadataView from './MetadataView';
7+
import MetadataViewContainer, { MetadataViewContainerProps } from './MetadataViewContainer';
88
import { isFeatureEnabled, type FeatureConfig } from '../common/feature-checking';
99
import { VIEW_ERROR, VIEW_METADATA, VIEW_MODE_LIST, VIEW_MODE_GRID, VIEW_SELECTED } from '../../constants';
1010
import type { ViewMode } from '../common/flowTypes';
@@ -36,6 +36,7 @@ export interface ContentProps extends Required<ItemEventHandlers>, Required<Item
3636
isSmall: boolean;
3737
isTouch: boolean;
3838
itemActions?: ItemAction[];
39+
metadataProps?: Omit<MetadataViewContainerProps, 'currentCollection'>;
3940
onMetadataUpdate: (
4041
item: BoxItem,
4142
field: string,
@@ -53,6 +54,7 @@ const Content = ({
5354
features,
5455
fieldsToShow = [],
5556
gridColumnCount,
57+
metadataProps,
5658
onMetadataUpdate,
5759
onSortChange,
5860
view,
@@ -79,7 +81,15 @@ const Content = ({
7981
{...rest}
8082
/>
8183
)}
82-
{isMetadataViewV2Feature && !isViewEmpty && isMetadataBasedView && <MetadataView />}
84+
{isMetadataViewV2Feature && isMetadataBasedView && (
85+
<MetadataViewContainer
86+
currentCollection={currentCollection}
87+
isLoading={percentLoaded !== 100}
88+
hasError={view === VIEW_ERROR}
89+
onSortChange={onSortChange}
90+
{...metadataProps}
91+
/>
92+
)}
8393
{!isViewEmpty && isListView && (
8494
<ItemList
8595
items={items}

0 commit comments

Comments
 (0)