box-ui-elements 23.4.0-beta.39 → 23.4.0-beta.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/explorer.js +1 -1
- package/dist/openwith.js +1 -1
- package/dist/picker.js +1 -1
- package/dist/preview.js +1 -1
- package/dist/sharing.js +1 -1
- package/dist/sidebar.js +1 -1
- package/dist/uploader.js +1 -1
- package/es/elements/content-explorer/stories/tests/MetadataView-visual.stories.js +61 -17
- package/es/elements/content-explorer/stories/tests/MetadataView-visual.stories.js.map +1 -1
- package/es/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.d.ts +1 -0
- package/i18n/ja-JP.js +2 -2
- package/i18n/ja-JP.properties +2 -2
- package/package.json +3 -3
- package/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx +53 -14
|
@@ -1,5 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
2
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
3
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
4
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
5
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
2
6
|
import { http, HttpResponse } from 'msw';
|
|
7
|
+
import { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';
|
|
8
|
+
import { Sign } from '@box/blueprint-web-assets/icons/Line';
|
|
9
|
+
import { expect, userEvent, waitFor, within } from 'storybook/test';
|
|
10
|
+
import noop from 'lodash/noop';
|
|
3
11
|
import ContentExplorer from '../../ContentExplorer';
|
|
4
12
|
import { DEFAULT_HOSTNAME_API } from '../../../../constants';
|
|
5
13
|
import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
|
|
@@ -70,26 +78,62 @@ export const metadataView = {
|
|
|
70
78
|
defaultView
|
|
71
79
|
}
|
|
72
80
|
};
|
|
81
|
+
const metadataViewV2ElementProps = {
|
|
82
|
+
metadataViewProps: {
|
|
83
|
+
columns
|
|
84
|
+
},
|
|
85
|
+
metadataQuery,
|
|
86
|
+
fieldsToShow,
|
|
87
|
+
defaultView,
|
|
88
|
+
features: {
|
|
89
|
+
contentExplorer: {
|
|
90
|
+
metadataViewV2: true
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
};
|
|
73
94
|
export const metadataViewV2 = {
|
|
74
|
-
args:
|
|
95
|
+
args: metadataViewV2ElementProps
|
|
96
|
+
};
|
|
97
|
+
export const metadataViewV2WithCustomActions = {
|
|
98
|
+
args: _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
|
|
75
99
|
metadataViewProps: {
|
|
76
|
-
columns
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
100
|
+
columns,
|
|
101
|
+
tableProps: {
|
|
102
|
+
isSelectAllEnabled: true
|
|
103
|
+
},
|
|
104
|
+
itemActionMenuProps: {
|
|
105
|
+
actions: [{
|
|
106
|
+
label: 'Download',
|
|
107
|
+
onClick: noop,
|
|
108
|
+
icon: Download
|
|
109
|
+
}],
|
|
110
|
+
subMenuTrigger: {
|
|
111
|
+
label: 'Sign',
|
|
112
|
+
icon: Sign
|
|
113
|
+
},
|
|
114
|
+
subMenuActions: [{
|
|
115
|
+
label: 'Request Signature',
|
|
116
|
+
onClick: noop,
|
|
117
|
+
icon: SignMeOthers
|
|
118
|
+
}]
|
|
84
119
|
}
|
|
85
120
|
}
|
|
86
|
-
},
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
121
|
+
}),
|
|
122
|
+
play: async ({
|
|
123
|
+
canvas
|
|
124
|
+
}) => {
|
|
125
|
+
await waitFor(() => {
|
|
126
|
+
expect(canvas.getByRole('row', {
|
|
127
|
+
name: /Child 2/i
|
|
128
|
+
})).toBeInTheDocument();
|
|
129
|
+
});
|
|
130
|
+
const firstRow = canvas.getByRole('row', {
|
|
131
|
+
name: /Child 2/i
|
|
132
|
+
});
|
|
133
|
+
const ellipsesButton = within(firstRow).getByRole('button', {
|
|
134
|
+
name: 'Action menu'
|
|
135
|
+
});
|
|
136
|
+
userEvent.click(ellipsesButton);
|
|
93
137
|
}
|
|
94
138
|
};
|
|
95
139
|
const meta = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetadataView-visual.stories.js","names":["
|
|
1
|
+
{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","Download","SignMeOthers","Sign","expect","userEvent","waitFor","within","noop","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","sort_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","displayName","columns","textValue","id","type","allowSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithCustomActions","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","play","canvas","getByRole","name","toBeInTheDocument","firstRow","ellipsesButton","click","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","json","get"],"sources":["../../../../../src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx"],"sourcesContent":["import { http, HttpResponse } from 'msw';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport { expect, userEvent, waitFor, within } from 'storybook/test';\nimport noop from 'lodash/noop';\nimport ContentExplorer from '../../ContentExplorer';\nimport { DEFAULT_HOSTNAME_API } from '../../../../constants';\nimport { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';\n\n// The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.\nconst { scope: templateScope, templateKey } = mockSchema;\n\nconst metadataScopeAndKey = `${templateScope}.${templateKey}`;\nconst metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;\n\n// This is the body of the metadata query API call.\n// https://developer.box.com/guides/metadata/queries/syntax/\nconst metadataQuery = {\n from: metadataScopeAndKey,\n ancestor_folder_id: '0',\n sort_by: [\n {\n field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema\n direction: 'asc',\n },\n ],\n fields: [\n // Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field\n ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`),\n 'name',\n ],\n};\n\n// Used for metadata view v1\nconst fieldsToShow = [\n { key: `${metadataFieldNamePrefix}.name`, canEdit: false, displayName: 'Alias' },\n { key: `${metadataFieldNamePrefix}.industry`, canEdit: true },\n { key: `${metadataFieldNamePrefix}.last_contacted_at`, canEdit: true },\n { key: `${metadataFieldNamePrefix}.role`, canEdit: true },\n];\n\n// Used for metadata view v2\nconst columns = [\n {\n // Always include the name column\n textValue: 'Name',\n id: 'name',\n type: 'string',\n allowSorting: true,\n minWidth: 150,\n maxWidth: 150,\n },\n ...mockSchema.fields.map(field => ({\n textValue: field.displayName,\n id: `${metadataFieldNamePrefix}.${field.key}`,\n type: field.type,\n allowSorting: true,\n minWidth: 150,\n maxWidth: 150,\n })),\n];\n\n// Switches ContentExplorer to use Metadata View over standard, folder-based view.\nconst defaultView = 'metadata';\n\ntype Story = StoryObj<typeof ContentExplorer>;\n\nexport const metadataView: Story = {\n args: {\n metadataQuery,\n fieldsToShow,\n defaultView,\n },\n};\n\nconst metadataViewV2ElementProps = {\n metadataViewProps: {\n columns,\n },\n metadataQuery,\n fieldsToShow,\n defaultView,\n features: {\n contentExplorer: {\n metadataViewV2: true,\n },\n },\n};\n\nexport const metadataViewV2: Story = {\n args: metadataViewV2ElementProps,\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n args: {\n ...metadataViewV2ElementProps,\n metadataViewProps: {\n columns,\n tableProps: {\n isSelectAllEnabled: true,\n },\n itemActionMenuProps: {\n actions: [\n {\n label: 'Download',\n onClick: noop,\n icon: Download,\n },\n ],\n subMenuTrigger: {\n label: 'Sign',\n icon: Sign,\n },\n subMenuActions: [\n {\n label: 'Request Signature',\n onClick: noop,\n icon: SignMeOthers,\n },\n ],\n },\n },\n },\n play: async ({ canvas }) => {\n await waitFor(() => {\n expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n });\n\n const firstRow = canvas.getByRole('row', { name: /Child 2/i });\n const ellipsesButton = within(firstRow).getByRole('button', { name: 'Action menu' });\n userEvent.click(ellipsesButton);\n },\n};\n\nconst meta: Meta<typeof ContentExplorer> = {\n title: 'Elements/ContentExplorer/tests/MetadataView/visual',\n component: ContentExplorer,\n args: {\n features: global.FEATURE_FLAGS,\n rootFolderId: global.FOLDER_ID,\n token: global.TOKEN,\n },\n parameters: {\n msw: {\n handlers: [\n http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {\n return HttpResponse.json(mockMetadata);\n }),\n http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {\n return HttpResponse.json(mockSchema);\n }),\n ],\n },\n },\n};\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,5 +3,6 @@ import ContentExplorer from '../../ContentExplorer';
|
|
|
3
3
|
type Story = StoryObj<typeof ContentExplorer>;
|
|
4
4
|
export declare const metadataView: Story;
|
|
5
5
|
export declare const metadataViewV2: Story;
|
|
6
|
+
export declare const metadataViewV2WithCustomActions: Story;
|
|
6
7
|
declare const meta: Meta<typeof ContentExplorer>;
|
|
7
8
|
export default meta;
|
package/i18n/ja-JP.js
CHANGED
|
@@ -46,7 +46,7 @@ export default {
|
|
|
46
46
|
"be.breadcrumb.breadcrumbLabel": "階層リンク",
|
|
47
47
|
"be.cancel": "キャンセル",
|
|
48
48
|
"be.choose": "選択",
|
|
49
|
-
"be.clearSelection": "
|
|
49
|
+
"be.clearSelection": "選択をクリア",
|
|
50
50
|
"be.close": "閉じる",
|
|
51
51
|
"be.collaboratedFolder": "コラボレーションフォルダ",
|
|
52
52
|
"be.collapse": "折りたたみます",
|
|
@@ -302,7 +302,7 @@ export default {
|
|
|
302
302
|
"be.noActivity": "表示するアクティビティはありません",
|
|
303
303
|
"be.noActivityAnnotationPrompt": "プレビューにカーソルを合わせ、下部のコントロールを使用してファイルに注釈を付けることができます。",
|
|
304
304
|
"be.noActivityCommentPrompt": "ユーザーにコメントおよび＠メンションして知らせます。",
|
|
305
|
-
"be.numFilesSelected": "{numSelected, plural, =0 {0
|
|
305
|
+
"be.numFilesSelected": "{numSelected, plural, =0 {0ファイルが選択されました} one {1ファイルが選択されました} other {#ファイルが選択されました} } ",
|
|
306
306
|
"be.open": "開く",
|
|
307
307
|
"be.pagination.nextPage": "次のページ",
|
|
308
308
|
"be.pagination.nextPageButton": "次へ",
|
package/i18n/ja-JP.properties
CHANGED
|
@@ -93,7 +93,7 @@ be.cancel = キャンセル
|
|
|
93
93
|
# Label for choose action.
|
|
94
94
|
be.choose = 選択
|
|
95
95
|
# Aria label for the clear selection button.
|
|
96
|
-
be.clearSelection =
|
|
96
|
+
be.clearSelection = 選択をクリア
|
|
97
97
|
# Label for close action.
|
|
98
98
|
be.close = 閉じる
|
|
99
99
|
# Icon title for a Box item of type folder that has collaborators
|
|
@@ -605,7 +605,7 @@ be.noActivityAnnotationPrompt = プレビューにカーソルを合わせ、下
|
|
|
605
605
|
# Message shown in
|
|
606
606
|
be.noActivityCommentPrompt = ユーザーにコメントおよび＠メンションして知らせます。
|
|
607
607
|
# Text shown to indicate the number of files selected
|
|
608
|
-
be.numFilesSelected = {numSelected, plural, =0 {0
|
|
608
|
+
be.numFilesSelected = {numSelected, plural, =0 {0ファイルが選択されました} one {1ファイルが選択されました} other {#ファイルが選択されました} }
|
|
609
609
|
# Label for open action.
|
|
610
610
|
be.open = 開く
|
|
611
611
|
# Next page button tooltip
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "box-ui-elements",
|
|
3
|
-
"version": "23.4.0-beta.
|
|
3
|
+
"version": "23.4.0-beta.40",
|
|
4
4
|
"description": "Box UI Elements",
|
|
5
5
|
"author": "Box (https://www.box.com/)",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
"@typescript-eslint/eslint-plugin": "^7.3.1",
|
|
182
182
|
"@typescript-eslint/parser": "^7.3.1",
|
|
183
183
|
"autoprefixer": "^10.4.19",
|
|
184
|
-
"axios": "^0.30.
|
|
184
|
+
"axios": "^0.30.1",
|
|
185
185
|
"babel-core": "^7.0.0-bridge.0",
|
|
186
186
|
"babel-jest": "^29.7.0",
|
|
187
187
|
"babel-loader": "^9.1.3",
|
|
@@ -290,7 +290,7 @@
|
|
|
290
290
|
"ts-loader": "^6.2.1",
|
|
291
291
|
"typescript": "5.2.2",
|
|
292
292
|
"uuid": "^8.3.2",
|
|
293
|
-
"wait-on": "^
|
|
293
|
+
"wait-on": "^8.0.4",
|
|
294
294
|
"webpack": "^5.92.0",
|
|
295
295
|
"webpack-bundle-analyzer": "^4.10.2",
|
|
296
296
|
"webpack-cli": "^5.1.4",
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import { http, HttpResponse } from 'msw';
|
|
3
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
import { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';
|
|
4
|
+
import { Sign } from '@box/blueprint-web-assets/icons/Line';
|
|
5
|
+
import { expect, userEvent, waitFor, within } from 'storybook/test';
|
|
6
|
+
import noop from 'lodash/noop';
|
|
4
7
|
import ContentExplorer from '../../ContentExplorer';
|
|
5
8
|
import { DEFAULT_HOSTNAME_API } from '../../../../constants';
|
|
6
9
|
import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
|
|
@@ -71,26 +74,62 @@ export const metadataView: Story = {
|
|
|
71
74
|
},
|
|
72
75
|
};
|
|
73
76
|
|
|
77
|
+
const metadataViewV2ElementProps = {
|
|
78
|
+
metadataViewProps: {
|
|
79
|
+
columns,
|
|
80
|
+
},
|
|
81
|
+
metadataQuery,
|
|
82
|
+
fieldsToShow,
|
|
83
|
+
defaultView,
|
|
84
|
+
features: {
|
|
85
|
+
contentExplorer: {
|
|
86
|
+
metadataViewV2: true,
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
};
|
|
90
|
+
|
|
74
91
|
export const metadataViewV2: Story = {
|
|
92
|
+
args: metadataViewV2ElementProps,
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
export const metadataViewV2WithCustomActions: Story = {
|
|
75
96
|
args: {
|
|
97
|
+
...metadataViewV2ElementProps,
|
|
76
98
|
metadataViewProps: {
|
|
77
99
|
columns,
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
100
|
+
tableProps: {
|
|
101
|
+
isSelectAllEnabled: true,
|
|
102
|
+
},
|
|
103
|
+
itemActionMenuProps: {
|
|
104
|
+
actions: [
|
|
105
|
+
{
|
|
106
|
+
label: 'Download',
|
|
107
|
+
onClick: noop,
|
|
108
|
+
icon: Download,
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
subMenuTrigger: {
|
|
112
|
+
label: 'Sign',
|
|
113
|
+
icon: Sign,
|
|
114
|
+
},
|
|
115
|
+
subMenuActions: [
|
|
116
|
+
{
|
|
117
|
+
label: 'Request Signature',
|
|
118
|
+
onClick: noop,
|
|
119
|
+
icon: SignMeOthers,
|
|
120
|
+
},
|
|
121
|
+
],
|
|
85
122
|
},
|
|
86
123
|
},
|
|
87
124
|
},
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
);
|
|
125
|
+
play: async ({ canvas }) => {
|
|
126
|
+
await waitFor(() => {
|
|
127
|
+
expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
const firstRow = canvas.getByRole('row', { name: /Child 2/i });
|
|
131
|
+
const ellipsesButton = within(firstRow).getByRole('button', { name: 'Action menu' });
|
|
132
|
+
userEvent.click(ellipsesButton);
|
|
94
133
|
},
|
|
95
134
|
};
|
|
96
135
|
|