From 93d11e30117a429264dd857c99dba6a20e59c4cf Mon Sep 17 00:00:00 2001
From: devinxl <devin@nodereal.io>
Date: Wed, 29 May 2024 15:27:30 +0800
Subject: [PATCH] feat(dcellar-web-ui): add bucket status tip to the bucket
 detail drawer

---
 .../components/DetailBucketOperation.tsx      | 30 ++++++++++++++++++-
 .../dcellar-web-ui/src/store/slices/bucket.ts |  5 +++-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/apps/dcellar-web-ui/src/modules/bucket/components/DetailBucketOperation.tsx b/apps/dcellar-web-ui/src/modules/bucket/components/DetailBucketOperation.tsx
index 63cf8687..fe01c558 100644
--- a/apps/dcellar-web-ui/src/modules/bucket/components/DetailBucketOperation.tsx
+++ b/apps/dcellar-web-ui/src/modules/bucket/components/DetailBucketOperation.tsx
@@ -44,6 +44,7 @@ import { useMount, useUnmount } from 'ahooks';
 import { DEFAULT_TAG } from '@/components/common/ManageTags';
 import { Activities } from '@/components/Activities';
 import { BucketStatus } from '@bnb-chain/greenfield-js-sdk';
+import { DiscontinueBanner } from '@/components/common/DiscontinueBanner';
 
 export const Label = ({ children }: PropsWithChildren) => (
   <Text as={'div'} fontSize={'14px'} fontWeight={500} color="readable.tertiary">
@@ -101,6 +102,12 @@ export const DetailBucketOperation = memo<DetailBucketOperationProps>(function D
     },
   };
 
+  const isFlowRateLimit = ['1', '3'].includes(selectedBucketInfo?.OffChainStatus);
+  const isBucketDiscontinue =
+    selectedBucketInfo.BucketStatus === BucketStatus.BUCKET_STATUS_DISCONTINUED;
+  const isBucketMigrating =
+    selectedBucketInfo.BucketStatus === BucketStatus.BUCKET_STATUS_MIGRATING;
+
   const quotaDetail = [
     {
       key: 'Monthly quota',
@@ -418,7 +425,7 @@ export const DetailBucketOperation = memo<DetailBucketOperationProps>(function D
     <>
       <QDrawerHeader>Bucket Detail</QDrawerHeader>
       <QDrawerBody>
-        <Flex mb={24}>
+        <Flex mb={16}>
           <IconFont type="detail-bucket" w={120} />
           <Box marginLeft={'24px'} flex={1}>
             <Text color="readable.tertiary" fontSize={'12px'} marginBottom="4px">
@@ -477,6 +484,27 @@ export const DetailBucketOperation = memo<DetailBucketOperationProps>(function D
             </Text>
           </Box>
         </Flex>
+        {isFlowRateLimit && (
+          <DiscontinueBanner
+            marginBottom={16}
+            content="The bucket's flow rate exceeds the payment account limit."
+          />
+        )}
+        {isBucketDiscontinue && (
+          <DiscontinueBanner
+            marginBottom={16}
+            content="All discontinued items in this bucket will be deleted by SP soon."
+          />
+        )}
+        {isBucketMigrating && (
+          <DiscontinueBanner
+            icon={<IconFont w={16} type={'migrate'} color={'#1184EE'} />}
+            color={'#1184EE'}
+            bg="opacity7"
+            marginBottom={16}
+            content="This bucket is in the process of data migration to another provider."
+          />
+        )}
         <Tabs>
           <TabList mb={24}>
             {VERSION_TABS.map((tab) => (
diff --git a/apps/dcellar-web-ui/src/store/slices/bucket.ts b/apps/dcellar-web-ui/src/store/slices/bucket.ts
index 6a7f66ff..79bb7531 100644
--- a/apps/dcellar-web-ui/src/store/slices/bucket.ts
+++ b/apps/dcellar-web-ui/src/store/slices/bucket.ts
@@ -243,7 +243,10 @@ export const setupBucketList =
     }
 
     const bucketList =
-      res.body?.map((bucket) => ({ ...bucket, BucketInfo: { ...bucket.BucketInfo } })) || [];
+      res.body?.map((bucket) => ({
+        ...bucket,
+        BucketInfo: { ...bucket.BucketInfo, BucketStatus: 1 },
+      })) || [];
 
     const bucketSpInfo = bucketList.map((b) => ({
       bucketName: b.BucketInfo.BucketName,