1 files changed, 62 insertions, 0 deletions

diff --git a/subprojects/frontend/src/table/ValueRenderer.tsx b/subprojects/frontend/src/table/ValueRenderer.tsx
new file mode 100644
index 00000000..ac5700e4
--- /dev/null
+++ b/subprojects/frontend/src/table/ValueRenderer.tsx
@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import LabelIcon from '@mui/icons-material/Label';
+import LabelOutlinedIcon from '@mui/icons-material/LabelOutlined';
+import { styled } from '@mui/material/styles';
+
+const Label = styled('div', {
+  name: 'ValueRenderer-Label',
+  shouldForwardProp: (prop) => prop !== 'value',
+})<{
+  value: 'TRUE' | 'UNKNOWN' | 'ERROR';
+}>(({ theme, value }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  ...(value === 'UNKNOWN'
+    ? {
+        color: theme.palette.text.secondary,
+      }
+    : {}),
+  ...(value === 'ERROR'
+    ? {
+        color: theme.palette.error.main,
+      }
+    : {}),
+  '& svg': {
+    marginRight: theme.spacing(0.5),
+  },
+}));
+
+export default function ValueRenderer({
+  value,
+}: {
+  value: string | undefined;
+}): React.ReactNode {
+  switch (value) {
+    case 'TRUE':
+      return (
+        <Label value={value}>
+          <LabelIcon fontSize="small" /> true
+        </Label>
+      );
+    case 'UNKNOWN':
+      return (
+        <Label value={value}>
+          <LabelOutlinedIcon fontSize="small" /> unknown
+        </Label>
+      );
+    case 'ERROR':
+      return (
+        <Label value={value}>
+          <CancelIcon fontSize="small" /> error
+        </Label>
+      );
+    default:
+      return value;
+  }
+}