feat: show bucket's ID for all buckets (#3201)

* feat: added ids to automated buckets

* fix: prettier

* test: test takes id into account

Author: blegesse-w

src/buckets/components/BucketCardMeta.test.tsx

@@ -59,9 +59,9 @@ describe('bucket meta data card, testing that the schema type shows up properly'
     const card = getByTestId('resourceCard-buckets-fooabc')
 
     const schemaType = getByTestId('bucket-schemaType')
-    // should be three nodes ('system', '30 days', and 'implicit schema type')
+    // should be three nodes ('system', '30 days', and 'implicit schema type', <id string>)
 
-    expect(card.childElementCount).toEqual(3)
+    expect(card.childElementCount).toEqual(4)
 
     expect(schemaType).toHaveTextContent(IMPLICIT_TEXT)
   })
@@ -71,8 +71,8 @@ describe('bucket meta data card, testing that the schema type shows up properly'
 
     const card = getByTestId('resourceCard-buckets-fooabc')
 
-    // should be three nodes ('system', '30 days', 'implicit schema type')
-    expect(card.childElementCount).toEqual(3)
+    // should be three nodes ('system', '30 days', 'implicit schema type', <id string>)
+    expect(card.childElementCount).toEqual(4)
 
     expect(getByTestId('bucket-schemaType')).toHaveTextContent(IMPLICIT_TEXT)
   })

src/buckets/components/BucketCardMeta.tsx

@@ -57,10 +57,22 @@ const BucketCardMeta: FC<Props> = ({bucket, notify}) => {
       {schemaLabel}
     </span>
   )
+  const bucketID = (
+    <CopyToClipboard
+      text={bucket.id}
+      onCopy={handleCopyAttempt}
+      key={bucket.id}
+    >
+      <span className="copy-bucket-id" title="Click to Copy to Clipboard">
+        ID: {bucket.id}
+        <span className="copy-bucket-id--helper">Copy to Clipboard</span>
+      </span>
+    </CopyToClipboard>
+  )
 
   const bucketInfo = CLOUD
-    ? [persistentBucketMeta, schemaBlock]
-    : [persistentBucketMeta]
+    ? [persistentBucketMeta, schemaBlock, bucketID]
+    : [persistentBucketMeta, bucketID]
 
   if (bucket.type === 'system') {
     return (
@@ -79,12 +91,6 @@ const BucketCardMeta: FC<Props> = ({bucket, notify}) => {
   return (
     <ResourceCard.Meta testID={`resourceCard-buckets-${bucket.id}`}>
       {bucketInfo}
-      <CopyToClipboard text={bucket.id} onCopy={handleCopyAttempt}>
-        <span className="copy-bucket-id" title="Click to Copy to Clipboard">
-          ID: {bucket.id}
-          <span className="copy-bucket-id--helper">Copy to Clipboard</span>
-        </span>
-      </CopyToClipboard>
     </ResourceCard.Meta>
   )
 }