feat(FR-1788): add more fields to User list page with BooleanTagWithFallBack component

Author: yomybaby

packages/backend.ai-ui/src/components/BooleanTagWithFallBack.tsx

@@ -0,0 +1,24 @@
+import { Tag } from 'antd';
+import React from 'react';
+
+const BooleanTagWithFallBack: React.FC<{
+  value: boolean | null | undefined;
+  fallback?: React.ReactNode;
+}> = ({ value, fallback = '-' }) => {
+  if (typeof value !== 'boolean') {
+    return fallback;
+  }
+  return value ? (
+    <Tag color="warning">true</Tag>
+  ) : (
+    <Tag
+      style={{
+        opacity: 0.5,
+      }}
+    >
+      false
+    </Tag>
+  );
+};
+
+export default BooleanTagWithFallBack;

packages/backend.ai-ui/src/components/index.ts

@@ -58,6 +58,7 @@ export type { BAIConfirmModalWithInputProps } from './BAIConfirmModalWithInput';
 export { default as BAIButton } from './BAIButton';
 export type { BAIButtonProps } from './BAIButton';
 export { default as BAIFetchKeyButton } from './BAIFetchKeyButton';
+export { default as BooleanTagWithFallBack } from './BooleanTagWithFallBack';
 export * from './Table';
 export * from './fragments';
 export * from './provider';