Skip to content

Fixed Search bucket input interaction #3558

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 20, 2025
Merged

Fixed Search bucket input interaction #3558

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bba75c1
Fixed Search bucket input interaction
Jun 18, 2025
2062756
Merge branch 'master' into collapse-search
bexsoft Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"local-storage-fallback": "^4.1.3",
"lodash": "^4.17.21",
"luxon": "^3.6.1",
"mds": "https://github.com/minio/mds.git#v1.1.3",
"mds": "https://github.com/minio/mds.git#v1.1.4",
"react": "^18.3.1",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.3.1",
Expand Down
86 changes: 54 additions & 32 deletions web-app/src/screens/Console/Menu/Listing/BucketFiltering.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,54 +14,76 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.

import React from "react";
import { Box, InputBox, SearchIcon } from "mds";
import React, { RefObject, useRef } from "react";
import { Box, InputBox, MenuItem, SearchIcon } from "mds";
import get from "lodash/get";
import { useTheme } from "styled-components";
import { AppState, useAppDispatch } from "../../../../store";
import { setFilterBucket } from "../../../../systemSlice";
import { menuOpen, setFilterBucket } from "../../../../systemSlice";
import { useSelector } from "react-redux";

const BucketFiltering = () => {
const theme = useTheme();
const ref = useRef<HTMLInputElement>(null);
const dispatch = useAppDispatch();
const bucketFilter = useSelector(
(state: AppState) => state.system.filterBucketList,
);
const sidebarOpen = useSelector(
(state: AppState) => state.system.sidebarOpen,
);

const expandSearchBox = () => {
dispatch(menuOpen(true));
ref.current?.focus();
};

return (
<Box
sx={{
padding: `5px 15px`,
"& .startOverlayIcon svg": {
fill: `${get(theme, "menu.vertical.textColor", "#FFF")}!important`,
},
}}
>
<InputBox
id={"filter-buckets"}
placeholder={"Filter Buckets"}
<>
{!sidebarOpen ? (
<MenuItem
name={"Filter Bucket"}
icon={<SearchIcon />}
onClick={expandSearchBox}
id={`filter-buckets-expand`}
/>
) : null}
<Box
sx={{
"& input": {
backgroundColor: "rgba(255,255,255,0.1)",
borderColor: get(
theme,
"menu.vertical.sectionDividerColor",
"#0F446C",
),
color: get(theme, "menu.vertical.textColor", "#FFF"),
"&::placeholder": {
color: get(theme, "menu.vertical.textColor", "#FFF"),
},
opacity: sidebarOpen ? 1 : 0,
height: sidebarOpen ? "inherit" : "0",
padding: `5px 15px`,
"& .startOverlayIcon svg": {
fill: `${get(theme, "menu.vertical.textColor", "#FFF")}!important`,
},
}}
value={bucketFilter}
onChange={(e) => {
dispatch(setFilterBucket(e.target.value));
}}
startIcon={<SearchIcon />}
/>
</Box>
>
<InputBox
id={"filter-buckets"}
placeholder={"Filter Buckets"}
sx={{
"& input": {
backgroundColor: "rgba(255,255,255,0.1)",
borderColor: get(
theme,
"menu.vertical.sectionDividerColor",
"#0F446C",
),
color: get(theme, "menu.vertical.textColor", "#FFF"),
"&::placeholder": {
color: get(theme, "menu.vertical.textColor", "#FFF"),
},
},
}}
value={bucketFilter}
onChange={(e) => {
dispatch(setFilterBucket(e.target.value));
}}
startIcon={<SearchIcon />}
ref={ref as unknown as RefObject<HTMLInputElement>}
/>
</Box>
</>
);
};

Expand Down
47 changes: 26 additions & 21 deletions web-app/src/screens/Console/Menu/Listing/BucketsListing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ const ListBuckets = () => {
const loadingBuckets = useSelector(
(state: AppState) => state.system.loadBucketsListing,
);
const sidebarOpen = useSelector(
(state: AppState) => state.system.sidebarOpen,
);

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

Expand Down Expand Up @@ -125,27 +128,29 @@ const ListBuckets = () => {
/>
</Box>
)}
{filteredRecords.length === 0 && filterBuckets !== "" && (
<Box
sx={{
"& .helpbox-container": {
backgroundColor: "transparent",
color: get(theme, "menu.vertical.textColor", "#FFF"),
border: 0,
},
}}
>
<HelpBox
iconComponent={<BucketsIcon />}
title={"No Results"}
help={
<Box sx={{ textAlign: "center" }}>
No buckets match the filtering condition
</Box>
}
/>
</Box>
)}
{filteredRecords.length === 0 &&
filterBuckets !== "" &&
sidebarOpen && (
<Box
sx={{
"& .helpbox-container": {
backgroundColor: "transparent",
color: get(theme, "menu.vertical.textColor", "#FFF"),
border: 0,
},
}}
>
<HelpBox
iconComponent={<BucketsIcon />}
title={"No Results"}
help={
<Box sx={{ textAlign: "center" }}>
No buckets match the filtering condition
</Box>
}
/>
</Box>
)}
</Box>
<MenuDivider />
</Fragment>
Expand Down
34 changes: 17 additions & 17 deletions web-app/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3064,32 +3064,32 @@ __metadata:
languageName: node
linkType: hard

"@storybook/instrumenter@npm:8.6.13":
version: 8.6.13
resolution: "@storybook/instrumenter@npm:8.6.13"
"@storybook/instrumenter@npm:8.6.14":
version: 8.6.14
resolution: "@storybook/instrumenter@npm:8.6.14"
dependencies:
"@storybook/global": "npm:^5.0.0"
"@vitest/utils": "npm:^2.1.1"
peerDependencies:
storybook: ^8.6.13
checksum: 10c0/316500e5a931ee8b558231492f409231f3e5407bb10c684f6d8d171c7258cc78e8184c3898ecb631a8bcd636ebd03f5db7dc839d3321a47949f8e2053ebec76a
storybook: ^8.6.14
checksum: 10c0/6b887e25d11404bb1b0f27eea310529732d9a6222d2581ae9f5d66d28e02b76a4ebe0a31d97322d88d5c9d2d2bd503e5f3da6b6f7dfc4c025eb7f86371db0e23
languageName: node
linkType: hard

"@storybook/test@npm:^8.6.12":
version: 8.6.13
resolution: "@storybook/test@npm:8.6.13"
"@storybook/test@npm:^8.6.14":
version: 8.6.14
resolution: "@storybook/test@npm:8.6.14"
dependencies:
"@storybook/global": "npm:^5.0.0"
"@storybook/instrumenter": "npm:8.6.13"
"@storybook/instrumenter": "npm:8.6.14"
"@testing-library/dom": "npm:10.4.0"
"@testing-library/jest-dom": "npm:6.5.0"
"@testing-library/user-event": "npm:14.5.2"
"@vitest/expect": "npm:2.0.5"
"@vitest/spy": "npm:2.0.5"
peerDependencies:
storybook: ^8.6.13
checksum: 10c0/b601d156ae00f73daf56baac49df3ddac6d9ef27bcaf411556ddebae8650183f440899fcc10c759fa28f07422fa64ee3b79bdf8c43ba14b069145a51fbe3dce4
storybook: ^8.6.14
checksum: 10c0/f2808db7d567b03320dbdd4a5e2b8ff8a92860138ff4fc87c7c18c3b2fbfb57158cc5ae936770222d7c3ef0fbed85f5e826762ddbeb7f0399961ab9528dbbcb8
languageName: node
linkType: hard

Expand Down Expand Up @@ -11861,19 +11861,19 @@ __metadata:
languageName: node
linkType: hard

"mds@https://github.com/minio/mds.git#v1.1.3":
version: 1.1.3
resolution: "mds@https://github.com/minio/mds.git#commit=ed34ced6ff27df3aacf5ba5456e2f954573e4445"
"mds@https://github.com/minio/mds.git#v1.1.4":
version: 1.1.4
resolution: "mds@https://github.com/minio/mds.git#commit=a84dd581d4502d2d05ffa78a028e50909b7e9d3e"
dependencies:
"@storybook/test": "npm:^8.6.12"
"@storybook/test": "npm:^8.6.14"
"@types/styled-components": "npm:^5.1.34"
"@uiw/react-textarea-code-editor": "npm:^3.1.1"
detect-gpu: "npm:^5.0.70"
luxon: "npm:^3.6.1"
react-calendar: "npm:^5.1.0"
react-virtualized: "npm:^9.22.6"
styled-components: "npm:^5.3.11"
checksum: 10c0/da8f68cd110aa7318ffa86bf4fd818c5fca7d8bef1847e51cde507f6d6209df806ca1dd702d1626d5acd82feae70038791b5b7afafe7b2988f2ae589d235f56c
checksum: 10c0/a1b75417214a25dc6cdb839396bb3beaf189b90fd61f6e4f1812a5d66dc7508eecb3e0f93f84f5feb27d51b60ed35d17a03f551e28990851ea048701711bb06a
languageName: node
linkType: hard

Expand Down Expand Up @@ -18529,7 +18529,7 @@ __metadata:
local-storage-fallback: "npm:^4.1.3"
lodash: "npm:^4.17.21"
luxon: "npm:^3.6.1"
mds: "https://github.com/minio/mds.git#v1.1.3"
mds: "https://github.com/minio/mds.git#v1.1.4"
minio: "npm:^8.0.5"
nyc: "npm:^15.1.0"
prettier: "npm:3.5.3"
Expand Down
Loading