Add delete tags (#216)

* Add delete tags

* Add changelog

* Add test

* fmt

* fmt

Author: AnthonyCvn

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.15.1 - 2026-06-19
+
+### Fixed
+
+- Show "Deleting" status badge for entries during bulk deletion until server completes, [PR-216](https://github.com/reductstore/web-console/pull/216)
+
 ## 1.15.0 - 2026-06-16
 
 ### Added
@@ -352,7 +358,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Initial Release
 
-[Unreleased]: https://github.com/reductstore/web-console/compare/v1.15.0...HEAD
+[Unreleased]: https://github.com/reductstore/web-console/compare/v1.15.1...HEAD
+[1.15.1]: https://github.com/reductstore/web-console/compare/v1.15.0...v1.15.1
 [1.15.0]: https://github.com/reductstore/web-console/compare/v1.14.2...v1.15.0
 [1.14.2]: https://github.com/reductstore/web-console/compare/v1.14.1...v1.14.2
 [1.14.1]: https://github.com/reductstore/web-console/compare/v1.14.0...v1.14.1

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "web-console",
-  "version": "1.15.0",
+  "version": "1.15.1",
   "type": "module",
   "private": true,
   "devDependencies": {

package.json

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, fireEvent, waitFor } from "@testing-library/react";
 import { mockJSDOM } from "../../Helpers/TestHelpers";
-import { Bucket, BucketInfo, Client, EntryInfo } from "reduct-js";
+import { Bucket, BucketInfo, Client, EntryInfo, Status } from "reduct-js";
 import BucketDetail from "./BucketDetail";
 import { MemoryRouter } from "react-router-dom";
 import { act } from "react";
@@ -136,4 +136,31 @@ describe("BucketDetail", () => {
     // The table should still render (filtered)
     expect(container.querySelector(".entriesTable")).not.toBeNull();
   });
+
+  it("should show deleting badge for entries with DELETING status", async () => {
+    bucket.getEntryList = vi.fn().mockResolvedValue([
+      {
+        name: "deleting-entry",
+        blockCount: 1n,
+        recordCount: 1n,
+        size: 512n,
+        oldestRecord: 0n,
+        latestRecord: 10000n,
+        status: Status.DELETING,
+      } as EntryInfo,
+    ]);
+
+    const { container } = render(
+      <MemoryRouter>
+        <BucketDetail client={client} />
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(container.querySelector(".entriesTable")).not.toBeNull();
+    });
+
+    const row = container.querySelector(".ant-table-row");
+    expect(row?.textContent).toContain("Deleting");
+  });
 });

src/Views/BucketPanel/BucketDetail.test.tsx

@@ -16,6 +16,7 @@ import {
   Divider,
   Flex,
   Input,
+  Tag,
   Tooltip,
   Typography,
   message,
@@ -30,6 +31,7 @@ import {
   EditOutlined,
   ExpandAltOutlined,
   LineChartOutlined,
+  LoadingOutlined,
   NodeCollapseOutlined,
   NodeExpandOutlined,
   PartitionOutlined,
@@ -316,33 +318,19 @@ export default function BucketDetail(props: Readonly<Props>) {
   } = useBulkDelete({
     onDelete: async (entryName) => {
       if (!info) throw new Error("No bucket info");
-      const prefix = `${entryName}/`;
+      const bucket: Bucket = await props.client.getBucket(info.name);
+      await bucket.removeEntry(entryName);
+    },
+    onStart: (keys) => {
       setEntries((prev) =>
         prev.map((entry) =>
-          entry.name === entryName || entry.name.startsWith(prefix)
+          keys.some(
+            (key) => entry.name === key || entry.name.startsWith(`${key}/`),
+          )
             ? { ...entry, status: Status.DELETING }
             : entry,
         ),
       );
-      try {
-        const bucket: Bucket = await props.client.getBucket(info.name);
-        await bucket.removeEntry(entryName);
-        setEntries((prev) =>
-          prev.filter(
-            (entry) =>
-              entry.name !== entryName && !entry.name.startsWith(prefix),
-          ),
-        );
-      } catch (err) {
-        setEntries((prev) =>
-          prev.map((entry) =>
-            entry.name === entryName || entry.name.startsWith(prefix)
-              ? { ...entry, status: Status.READY }
-              : entry,
-          ),
-        );
-        throw err;
-      }
     },
     onSuccess: () => {
       setIsBulkDeleteOpen(false);
@@ -462,7 +450,20 @@ export default function BucketDetail(props: Readonly<Props>) {
                   {row.name}
                 </Typography.Link>
               ) : (
-                <Typography.Text>{row.name}</Typography.Text>
+                <Typography.Text
+                  style={isDeleting ? { color: "#bfbfbf" } : undefined}
+                >
+                  {row.name}
+                </Typography.Text>
+              )}
+              {isDeleting && (
+                <Tag
+                  color="processing"
+                  icon={<LoadingOutlined spin />}
+                  style={{ marginLeft: 4 }}
+                >
+                  Deleting
+                </Tag>
               )}
               {!row.ownEntryName &&
                 row.children &&