Skip to content

Commit 40bee68

Browse files
bexsoftBenjamin Perez
bexsoft
and
Benjamin Perez
authored
Fixed Search bucket input interaction (#3558)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net> Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent 6aee1e0 commit 40bee68

File tree

4 files changed

+98
-71
lines changed

4 files changed

+98
-71
lines changed

‎web-app/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"local-storage-fallback": "^4.1.3",
1313
"lodash": "^4.17.21",
1414
"luxon": "^3.6.1",
15-
"mds": "https://github.com/minio/mds.git#v1.1.3",
15+
"mds": "https://github.com/minio/mds.git#v1.1.4",
1616
"react": "^18.3.1",
1717
"react-copy-to-clipboard": "^5.1.0",
1818
"react-dom": "^18.3.1",

‎web-app/src/screens/Console/Menu/Listing/BucketFiltering.tsx

Lines changed: 54 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -14,54 +14,76 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React from "react";
18-
import { Box, InputBox, SearchIcon } from "mds";
17+
import React, { RefObject, useRef } from "react";
18+
import { Box, InputBox, MenuItem, SearchIcon } from "mds";
1919
import get from "lodash/get";
2020
import { useTheme } from "styled-components";
2121
import { AppState, useAppDispatch } from "../../../../store";
22-
import { setFilterBucket } from "../../../../systemSlice";
22+
import { menuOpen, setFilterBucket } from "../../../../systemSlice";
2323
import { useSelector } from "react-redux";
2424

2525
const BucketFiltering = () => {
2626
const theme = useTheme();
27+
const ref = useRef<HTMLInputElement>(null);
2728
const dispatch = useAppDispatch();
2829
const bucketFilter = useSelector(
2930
(state: AppState) => state.system.filterBucketList,
3031
);
32+
const sidebarOpen = useSelector(
33+
(state: AppState) => state.system.sidebarOpen,
34+
);
35+
36+
const expandSearchBox = () => {
37+
dispatch(menuOpen(true));
38+
ref.current?.focus();
39+
};
3140

3241
return (
33-
<Box
34-
sx={{
35-
padding: `5px 15px`,
36-
"& .startOverlayIcon svg": {
37-
fill: `${get(theme, "menu.vertical.textColor", "#FFF")}!important`,
38-
},
39-
}}
40-
>
41-
<InputBox
42-
id={"filter-buckets"}
43-
placeholder={"Filter Buckets"}
42+
<>
43+
{!sidebarOpen ? (
44+
<MenuItem
45+
name={"Filter Bucket"}
46+
icon={<SearchIcon />}
47+
onClick={expandSearchBox}
48+
id={`filter-buckets-expand`}
49+
/>
50+
) : null}
51+
<Box
4452
sx={{
45-
"& input": {
46-
backgroundColor: "rgba(255,255,255,0.1)",
47-
borderColor: get(
48-
theme,
49-
"menu.vertical.sectionDividerColor",
50-
"#0F446C",
51-
),
52-
color: get(theme, "menu.vertical.textColor", "#FFF"),
53-
"&::placeholder": {
54-
color: get(theme, "menu.vertical.textColor", "#FFF"),
55-
},
53+
opacity: sidebarOpen ? 1 : 0,
54+
height: sidebarOpen ? "inherit" : "0",
55+
padding: `5px 15px`,
56+
"& .startOverlayIcon svg": {
57+
fill: `${get(theme, "menu.vertical.textColor", "#FFF")}!important`,
5658
},
5759
}}
58-
value={bucketFilter}
59-
onChange={(e) => {
60-
dispatch(setFilterBucket(e.target.value));
61-
}}
62-
startIcon={<SearchIcon />}
63-
/>
64-
</Box>
60+
>
61+
<InputBox
62+
id={"filter-buckets"}
63+
placeholder={"Filter Buckets"}
64+
sx={{
65+
"& input": {
66+
backgroundColor: "rgba(255,255,255,0.1)",
67+
borderColor: get(
68+
theme,
69+
"menu.vertical.sectionDividerColor",
70+
"#0F446C",
71+
),
72+
color: get(theme, "menu.vertical.textColor", "#FFF"),
73+
"&::placeholder": {
74+
color: get(theme, "menu.vertical.textColor", "#FFF"),
75+
},
76+
},
77+
}}
78+
value={bucketFilter}
79+
onChange={(e) => {
80+
dispatch(setFilterBucket(e.target.value));
81+
}}
82+
startIcon={<SearchIcon />}
83+
ref={ref as unknown as RefObject<HTMLInputElement>}
84+
/>
85+
</Box>
86+
</>
6587
);
6688
};
6789

‎web-app/src/screens/Console/Menu/Listing/BucketsListing.tsx

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ const ListBuckets = () => {
4141
const loadingBuckets = useSelector(
4242
(state: AppState) => state.system.loadBucketsListing,
4343
);
44+
const sidebarOpen = useSelector(
45+
(state: AppState) => state.system.sidebarOpen,
46+
);
4447

4548
const [records, setRecords] = useState<Bucket[]>([]);
4649

@@ -125,27 +128,29 @@ const ListBuckets = () => {
125128
/>
126129
</Box>
127130
)}
128-
{filteredRecords.length === 0 && filterBuckets !== "" && (
129-
<Box
130-
sx={{
131-
"& .helpbox-container": {
132-
backgroundColor: "transparent",
133-
color: get(theme, "menu.vertical.textColor", "#FFF"),
134-
border: 0,
135-
},
136-
}}
137-
>
138-
<HelpBox
139-
iconComponent={<BucketsIcon />}
140-
title={"No Results"}
141-
help={
142-
<Box sx={{ textAlign: "center" }}>
143-
No buckets match the filtering condition
144-
</Box>
145-
}
146-
/>
147-
</Box>
148-
)}
131+
{filteredRecords.length === 0 &&
132+
filterBuckets !== "" &&
133+
sidebarOpen && (
134+
<Box
135+
sx={{
136+
"& .helpbox-container": {
137+
backgroundColor: "transparent",
138+
color: get(theme, "menu.vertical.textColor", "#FFF"),
139+
border: 0,
140+
},
141+
}}
142+
>
143+
<HelpBox
144+
iconComponent={<BucketsIcon />}
145+
title={"No Results"}
146+
help={
147+
<Box sx={{ textAlign: "center" }}>
148+
No buckets match the filtering condition
149+
</Box>
150+
}
151+
/>
152+
</Box>
153+
)}
149154
</Box>
150155
<MenuDivider />
151156
</Fragment>

‎web-app/yarn.lock

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3064,32 +3064,32 @@ __metadata:
30643064
languageName: node
30653065
linkType: hard
30663066

3067-
"@storybook/instrumenter@npm:8.6.13":
3068-
version: 8.6.13
3069-
resolution: "@storybook/instrumenter@npm:8.6.13"
3067+
"@storybook/instrumenter@npm:8.6.14":
3068+
version: 8.6.14
3069+
resolution: "@storybook/instrumenter@npm:8.6.14"
30703070
dependencies:
30713071
"@storybook/global": "npm:^5.0.0"
30723072
"@vitest/utils": "npm:^2.1.1"
30733073
peerDependencies:
3074-
storybook: ^8.6.13
3075-
checksum: 10c0/316500e5a931ee8b558231492f409231f3e5407bb10c684f6d8d171c7258cc78e8184c3898ecb631a8bcd636ebd03f5db7dc839d3321a47949f8e2053ebec76a
3074+
storybook: ^8.6.14
3075+
checksum: 10c0/6b887e25d11404bb1b0f27eea310529732d9a6222d2581ae9f5d66d28e02b76a4ebe0a31d97322d88d5c9d2d2bd503e5f3da6b6f7dfc4c025eb7f86371db0e23
30763076
languageName: node
30773077
linkType: hard
30783078

3079-
"@storybook/test@npm:^8.6.12":
3080-
version: 8.6.13
3081-
resolution: "@storybook/test@npm:8.6.13"
3079+
"@storybook/test@npm:^8.6.14":
3080+
version: 8.6.14
3081+
resolution: "@storybook/test@npm:8.6.14"
30823082
dependencies:
30833083
"@storybook/global": "npm:^5.0.0"
3084-
"@storybook/instrumenter": "npm:8.6.13"
3084+
"@storybook/instrumenter": "npm:8.6.14"
30853085
"@testing-library/dom": "npm:10.4.0"
30863086
"@testing-library/jest-dom": "npm:6.5.0"
30873087
"@testing-library/user-event": "npm:14.5.2"
30883088
"@vitest/expect": "npm:2.0.5"
30893089
"@vitest/spy": "npm:2.0.5"
30903090
peerDependencies:
3091-
storybook: ^8.6.13
3092-
checksum: 10c0/b601d156ae00f73daf56baac49df3ddac6d9ef27bcaf411556ddebae8650183f440899fcc10c759fa28f07422fa64ee3b79bdf8c43ba14b069145a51fbe3dce4
3091+
storybook: ^8.6.14
3092+
checksum: 10c0/f2808db7d567b03320dbdd4a5e2b8ff8a92860138ff4fc87c7c18c3b2fbfb57158cc5ae936770222d7c3ef0fbed85f5e826762ddbeb7f0399961ab9528dbbcb8
30933093
languageName: node
30943094
linkType: hard
30953095

@@ -11861,19 +11861,19 @@ __metadata:
1186111861
languageName: node
1186211862
linkType: hard
1186311863

11864-
"mds@https://github.com/minio/mds.git#v1.1.3":
11865-
version: 1.1.3
11866-
resolution: "mds@https://github.com/minio/mds.git#commit=ed34ced6ff27df3aacf5ba5456e2f954573e4445"
11864+
"mds@https://github.com/minio/mds.git#v1.1.4":
11865+
version: 1.1.4
11866+
resolution: "mds@https://github.com/minio/mds.git#commit=a84dd581d4502d2d05ffa78a028e50909b7e9d3e"
1186711867
dependencies:
11868-
"@storybook/test": "npm:^8.6.12"
11868+
"@storybook/test": "npm:^8.6.14"
1186911869
"@types/styled-components": "npm:^5.1.34"
1187011870
"@uiw/react-textarea-code-editor": "npm:^3.1.1"
1187111871
detect-gpu: "npm:^5.0.70"
1187211872
luxon: "npm:^3.6.1"
1187311873
react-calendar: "npm:^5.1.0"
1187411874
react-virtualized: "npm:^9.22.6"
1187511875
styled-components: "npm:^5.3.11"
11876-
checksum: 10c0/da8f68cd110aa7318ffa86bf4fd818c5fca7d8bef1847e51cde507f6d6209df806ca1dd702d1626d5acd82feae70038791b5b7afafe7b2988f2ae589d235f56c
11876+
checksum: 10c0/a1b75417214a25dc6cdb839396bb3beaf189b90fd61f6e4f1812a5d66dc7508eecb3e0f93f84f5feb27d51b60ed35d17a03f551e28990851ea048701711bb06a
1187711877
languageName: node
1187811878
linkType: hard
1187911879

@@ -18529,7 +18529,7 @@ __metadata:
1852918529
local-storage-fallback: "npm:^4.1.3"
1853018530
lodash: "npm:^4.17.21"
1853118531
luxon: "npm:^3.6.1"
18532-
mds: "https://github.com/minio/mds.git#v1.1.3"
18532+
mds: "https://github.com/minio/mds.git#v1.1.4"
1853318533
minio: "npm:^8.0.5"
1853418534
nyc: "npm:^15.1.0"
1853518535
prettier: "npm:3.5.3"

0 commit comments

Comments
 (0)