Skip to content

Commit 97bc5e7

Browse files
greg-in-a-boxtjiang-box
greg-in-a-box
and
tjiang-box
authored
chore(content-explorer): Migrate Header (#3887)
* chore(content-explorer): Migrate Header * chore(content-explorer): update styles and fix nits --------- Co-authored-by: Jerry Jiang <zmxjtbox@gmail.com>
1 parent e624225 commit 97bc5e7

File tree

18 files changed

+446
-119
lines changed

18 files changed

+446
-119
lines changed

‎i18n/en-US.properties‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -646,6 +646,8 @@ be.rootBreadcrumb = All Files
646646
be.save = Save
647647
# Shown as the title in the sub header while searching.
648648
be.searchBreadcrumb = Search Results
649+
# Aria label for the clear button in the search box.
650+
be.searchClear = Clear search
649651
# Shown as a placeholder in the search box.
650652
be.searchPlaceholder = Search files and folders
651653
# Default label for selected items list in the footer.

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

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
const mockRecentItems = {
2+
next_marker: '',
3+
limit: 100,
4+
order: {
5+
by: 'interacted_at',
6+
direction: 'DESC',
7+
},
8+
entries: [
9+
{
10+
type: 'recent_item',
11+
interaction_type: 'item_preview',
12+
interacted_at: '2025-01-31T13:40:24-08:00',
13+
item: {
14+
type: 'file',
15+
id: '1222291629977',
16+
etag: '1',
17+
name: 'Resume (4).pdf',
18+
size: 69266,
19+
parent: {
20+
type: 'folder',
21+
id: '0',
22+
sequence_id: null,
23+
etag: null,
24+
name: 'All Files',
25+
},
26+
extension: 'pdf',
27+
permissions: {
28+
can_download: true,
29+
can_preview: true,
30+
can_upload: true,
31+
can_comment: true,
32+
can_rename: true,
33+
can_delete: true,
34+
can_share: true,
35+
can_set_share_access: true,
36+
can_invite_collaborator: true,
37+
can_annotate: true,
38+
can_view_annotations_all: true,
39+
can_view_annotations_self: true,
40+
can_create_annotations: true,
41+
can_view_annotations: true,
42+
},
43+
path_collection: {
44+
total_count: 1,
45+
entries: [
46+
{
47+
type: 'folder',
48+
id: '0',
49+
sequence_id: null,
50+
etag: null,
51+
name: 'All Files',
52+
},
53+
],
54+
},
55+
modified_at: '2023-05-24T11:43:41-07:00',
56+
created_at: '2023-05-24T11:43:41-07:00',
57+
modified_by: {
58+
type: 'user',
59+
id: '24991742828',
60+
name: 'GW',
61+
login: 'gw@boxdemo.com',
62+
},
63+
has_collaborations: false,
64+
is_externally_owned: false,
65+
authenticated_download_url: 'https://dl.boxcloud.com/api/2.0/files/1222291629977/content',
66+
is_download_available: true,
67+
representations: {
68+
entries: [
69+
{
70+
representation: 'jpg',
71+
properties: {
72+
dimensions: '1024x1024',
73+
paged: 'false',
74+
thumb: 'false',
75+
},
76+
info: {
77+
url: 'https://api.box.com/2.0/internal_files/1222291629977/versions/1334003366777/representations/jpg_1024x1024',
78+
},
79+
status: {
80+
state: 'success',
81+
},
82+
content: {
83+
url_template:
84+
'https://dl.boxcloud.com/api/2.0/internal_files/1222291629977/versions/1334003366777/representations/jpg_1024x1024/content/{+asset_path}',
85+
},
86+
},
87+
],
88+
},
89+
file_version: {
90+
type: 'file_version',
91+
id: '1334003366777',
92+
sha1: 'c60c18bcdc28ed573f7acb440e5d5f1ca9bd2f59',
93+
},
94+
sha1: 'c60c18bcdc28ed573f7acb440e5d5f1ca9bd2f59',
95+
shared_link: {
96+
url: 'https://app.box.com/s/6wvvmdmgmo9ky62p054zbtgn1ph78els',
97+
download_url: 'https://app.box.com/shared/static/6wvvmdmgmo9ky62p054zbtgn1ph78els.pdf',
98+
vanity_url: null,
99+
vanity_name: null,
100+
effective_access: 'open',
101+
effective_permission: 'can_download',
102+
is_password_enabled: false,
103+
unshared_at: null,
104+
download_count: 0,
105+
preview_count: 0,
106+
access: 'open',
107+
permissions: {
108+
can_preview: true,
109+
can_download: true,
110+
can_edit: false,
111+
},
112+
},
113+
watermark_info: {
114+
is_watermarked: false,
115+
},
116+
},
117+
interaction_shared_link: null,
118+
},
119+
{
120+
type: 'recent_item',
121+
interaction_type: 'item_preview',
122+
interacted_at: '2025-01-28T11:12:18-08:00',
123+
item: {
124+
type: 'file',
125+
id: '1318276254035',
126+
etag: '1',
127+
name: 'Resume (2) (1).pdf',
128+
size: 69266,
129+
parent: {
130+
type: 'folder',
131+
id: '218662304788',
132+
sequence_id: '0',
133+
etag: '0',
134+
name: 'metadataquery',
135+
},
136+
extension: 'pdf',
137+
permissions: {
138+
can_download: true,
139+
can_preview: true,
140+
can_upload: true,
141+
can_comment: true,
142+
can_rename: true,
143+
can_delete: true,
144+
can_share: true,
145+
can_set_share_access: true,
146+
can_invite_collaborator: true,
147+
can_annotate: true,
148+
can_view_annotations_all: true,
149+
can_view_annotations_self: true,
150+
can_create_annotations: true,
151+
can_view_annotations: true,
152+
},
153+
path_collection: {
154+
total_count: 2,
155+
entries: [
156+
{
157+
type: 'folder',
158+
id: '0',
159+
sequence_id: null,
160+
etag: null,
161+
name: 'All Files',
162+
},
163+
{
164+
type: 'folder',
165+
id: '218662304788',
166+
sequence_id: '0',
167+
etag: '0',
168+
name: 'metadataquery',
169+
},
170+
],
171+
},
172+
modified_at: '2023-09-26T14:04:52-07:00',
173+
created_at: '2023-09-26T14:04:52-07:00',
174+
modified_by: {
175+
type: 'user',
176+
id: '24991742828',
177+
name: 'GW',
178+
login: 'gw@boxdemo.com',
179+
},
180+
has_collaborations: false,
181+
is_externally_owned: false,
182+
authenticated_download_url: 'https://dl.boxcloud.com/api/2.0/files/1318276254035/content',
183+
is_download_available: true,
184+
representations: {
185+
entries: [
186+
{
187+
representation: 'jpg',
188+
properties: {
189+
dimensions: '1024x1024',
190+
paged: 'false',
191+
thumb: 'false',
192+
},
193+
info: {
194+
url: 'https://api.box.com/2.0/internal_files/1318276254035/versions/1442246185235/representations/jpg_1024x1024',
195+
},
196+
status: {
197+
state: 'success',
198+
},
199+
content: {
200+
url_template:
201+
'https://dl.boxcloud.com/api/2.0/internal_files/1318276254035/versions/1442246185235/representations/jpg_1024x1024/content/{+asset_path}',
202+
},
203+
},
204+
],
205+
},
206+
file_version: {
207+
type: 'file_version',
208+
id: '1442246185235',
209+
sha1: 'c60c18bcdc28ed573f7acb440e5d5f1ca9bd2f59',
210+
},
211+
sha1: 'c60c18bcdc28ed573f7acb440e5d5f1ca9bd2f59',
212+
shared_link: {
213+
url: 'https://app.box.com/s/4isrn71f96h1q76dluj1a71h6o8d6z17',
214+
download_url: 'https://app.box.com/shared/static/4isrn71f96h1q76dluj1a71h6o8d6z17.pdf',
215+
vanity_url: null,
216+
vanity_name: null,
217+
effective_access: 'open',
218+
effective_permission: 'can_download',
219+
is_password_enabled: false,
220+
unshared_at: null,
221+
download_count: 0,
222+
preview_count: 0,
223+
access: 'open',
224+
permissions: {
225+
can_preview: true,
226+
can_download: true,
227+
can_edit: false,
228+
},
229+
},
230+
watermark_info: {
231+
is_watermarked: false,
232+
},
233+
},
234+
interaction_shared_link: null,
235+
},
236+
],
237+
};
238+
export default mockRecentItems;

‎src/elements/common/header/Header.js‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎src/elements/common/header/Header.js.flow‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import * as React from 'react';
2+
import { useIntl } from 'react-intl';
3+
import { SearchInput } from '@box/blueprint-web';
4+
import Logo from './Logo';
5+
import messages from '../messages';
6+
import { VIEW_FOLDER, VIEW_SEARCH } from '../../../constants';
7+
import type { View } from '../../../common/types/core';
8+
9+
import './Header.scss';
10+
11+
type HeaderProps = {
12+
isHeaderLogoVisible?: boolean,
13+
logoUrl?: string,
14+
onSearch: any,
15+
view: View
16+
};
17+
18+
const Header = ({
19+
isHeaderLogoVisible = true,
20+
view,
21+
onSearch,
22+
logoUrl,
23+
}: HeaderProps) => {
24+
const { formatMessage } = useIntl();
25+
const searchMessage = formatMessage(messages.searchPlaceholder);
26+
const isFolder = view === VIEW_FOLDER;
27+
const isSearch = view === VIEW_SEARCH;
28+
29+
return (
30+
<div className="be-header">
31+
{isHeaderLogoVisible && <Logo url={logoUrl} />}
32+
<div className="be-search">
33+
<SearchInput
34+
disabled={!isFolder && !isSearch}
35+
onChange={onSearch}
36+
placeholder={searchMessage}
37+
searchInputAriaLabel={searchMessage}
38+
searchInputClearAriaLabel={formatMessage(messages.searchClear)}
39+
variant="global"
40+
/>
41+
</div>
42+
</div>
43+
);
44+
};
45+
46+
export default Header;

‎src/elements/common/header/Header.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
flex: 0 0 70px;
66
align-items: center;
77
padding: 0 25px 0 0;
8-
background: $almost-white;
9-
border-bottom: 1px solid $bdl-gray-10;
8+
border-bottom: 1px solid var(--border-divider-border);
109

1110
.be-is-small & {
1211
padding-right: 20px;
1312
}
1413

1514
.be-search {
1615
flex: 1;
16+
max-width: 520px;
1717
padding-left: 20px;
1818
}
1919

0 commit comments

Comments
 (0)