Skip to content

Commit caf61f2

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

16 files changed

+2306
-1076
lines changed

‎package.json‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -124,17 +124,21 @@
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.44.1",
128+
"@box/blueprint-web-assets": "^4.61.5",
129129
"@box/box-ai-agent-selector": "^0.48.5",
130130
"@box/box-ai-content-answers": "^0.124.1",
131+
"@box/box-item-type-selector": "^0.61.12",
131132
"@box/cldr-data": "^34.2.0",
132133
"@box/combobox-with-api": "^0.34.9",
133134
"@box/frontend": "^11.0.1",
134-
"@box/item-icon": "^0.9.83",
135+
"@box/item-icon": "^0.16.12",
135136
"@box/languages": "^1.0.0",
136-
"@box/metadata-editor": "^0.122.0",
137+
"@box/metadata-editor": "^0.122.12",
138+
"@box/metadata-filter": "^1.16.12",
139+
"@box/metadata-view": "^0.29.4",
137140
"@box/react-virtualized": "^9.22.3-rc-box.10",
141+
"@box/types": "^0.2.1",
138142
"@cfaester/enzyme-adapter-react-18": "^0.8.0",
139143
"@chromatic-com/storybook": "^4.0.1",
140144
"@commitlint/cli": "^19.8.0",
@@ -149,6 +153,7 @@
149153
"@storybook/addon-styling-webpack": "^2.0.0",
150154
"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
151155
"@storybook/react-webpack5": "^9.0.14",
156+
"@tanstack/react-virtual": "^3.13.12",
152157
"@testing-library/dom": "^10.4.0",
153158
"@testing-library/jest-dom": "^6.4.6",
154159
"@testing-library/react": "^16.0.0",
@@ -243,6 +248,7 @@
243248
"query-string": "5.1.1",
244249
"react": "^18.3.1",
245250
"react-animate-height": "^3.2.3",
251+
"react-aria-components": "^1.10.1",
246252
"react-beautiful-dnd": "^13.1.1",
247253
"react-docgen-typescript": "^1.16.1",
248254
"react-docgen-typescript-loader": "^3.6.0",
@@ -287,16 +293,21 @@
287293
"webpack-dev-server": "^5.2.1"
288294
},
289295
"peerDependencies": {
290-
"@box/blueprint-web": "^12.7.1",
291-
"@box/blueprint-web-assets": "^4.60.0",
296+
"@box/blueprint-web": "^12.47.0",
297+
"@box/blueprint-web-assets": "^4.61.5",
292298
"@box/box-ai-agent-selector": "^0.48.5",
293299
"@box/box-ai-content-answers": "^0.124.1",
300+
"@box/box-item-type-selector": "^0.61.12",
294301
"@box/cldr-data": ">=34.2.0",
295302
"@box/combobox-with-api": "^0.34.9",
296-
"@box/item-icon": "^0.9.83",
297-
"@box/metadata-editor": "^0.122.0",
303+
"@box/item-icon": "^0.16.12",
304+
"@box/metadata-editor": "^0.122.12",
305+
"@box/metadata-filter": "^1.16.12",
306+
"@box/metadata-view": "^0.29.4",
298307
"@box/react-virtualized": "^9.22.3-rc-box.10",
308+
"@box/types": "^0.2.1",
299309
"@hapi/address": "^2.1.4",
310+
"@tanstack/react-virtual": "^3.13.12",
300311
"axios": "^0.30.0",
301312
"classnames": "^2.2.5",
302313
"color": "^3.1.2",
@@ -317,6 +328,7 @@
317328
"query-string": "5.1.1",
318329
"react": "^17.0.1 || ^18.0.0",
319330
"react-animate-height": "^3.2.3",
331+
"react-aria-components": "^1.10.1",
320332
"react-beautiful-dnd": "^13.1.1",
321333
"react-dom": "^17.0.1 || ^18.0.0",
322334
"react-draggable": "^4.4.6",

‎scripts/i18n.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ module.exports = {
33
translationDependencies: [
44
'@box/box-ai-agent-selector',
55
'@box/box-ai-content-answers',
6+
'@box/box-item-type-selector',
67
'@box/item-icon',
78
'@box/metadata-editor',
9+
'@box/metadata-filter',
10+
'@box/metadata-view',
811
],
912
};

‎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|@box/box-item-type-selector)/)',
3030
],
3131
};

‎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: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ 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';
1111
import type { ItemAction, ItemEventHandlers, ItemEventPermissions } from '../common/item';
1212
import type { FieldsToShow } from '../../common/types/metadataQueries';
1313
import type { BoxItem, Collection, View } from '../../common/types/core';
14-
import type { MetadataFieldValue } from '../../common/types/metadata';
14+
import type { MetadataFieldValue, MetadataTemplate } from '../../common/types/metadata';
1515
import './Content.scss';
1616

1717
/**
@@ -36,6 +36,8 @@ export interface ContentProps extends Required<ItemEventHandlers>, Required<Item
3636
isSmall: boolean;
3737
isTouch: boolean;
3838
itemActions?: ItemAction[];
39+
metadataTemplate?: MetadataTemplate;
40+
metadataViewProps?: Omit<MetadataViewContainerProps, 'currentCollection'>;
3941
onMetadataUpdate: (
4042
item: BoxItem,
4143
field: string,
@@ -53,6 +55,8 @@ const Content = ({
5355
features,
5456
fieldsToShow = [],
5557
gridColumnCount,
58+
metadataTemplate,
59+
metadataViewProps,
5660
onMetadataUpdate,
5761
onSortChange,
5862
view,
@@ -70,7 +74,7 @@ const Content = ({
7074
<div className="bce-content">
7175
{view === VIEW_ERROR || view === VIEW_SELECTED ? null : <ProgressBar percent={percentLoaded} />}
7276

73-
{isViewEmpty && <EmptyView view={view} isLoading={percentLoaded !== 100} />}
77+
{!isMetadataViewV2Feature && isViewEmpty && <EmptyView view={view} isLoading={percentLoaded !== 100} />}
7478
{!isMetadataViewV2Feature && !isViewEmpty && isMetadataBasedView && (
7579
<MetadataBasedItemList
7680
currentCollection={currentCollection}
@@ -79,7 +83,15 @@ const Content = ({
7983
{...rest}
8084
/>
8185
)}
82-
{isMetadataViewV2Feature && !isViewEmpty && isMetadataBasedView && <MetadataView />}
86+
{isMetadataViewV2Feature && isMetadataBasedView && (
87+
<MetadataViewContainer
88+
currentCollection={currentCollection}
89+
isLoading={percentLoaded !== 100}
90+
hasError={view === VIEW_ERROR}
91+
metadataTemplate={metadataTemplate}
92+
{...metadataViewProps}
93+
/>
94+
)}
8395
{!isViewEmpty && isListView && (
8496
<ItemList
8597
items={items}

0 commit comments

Comments
 (0)