feat: toggle id display for job

felixmosh · Jul 10, 2020 · 2efd1f8 · 2efd1f8
1 parent 52bbc3e
commit 2efd1f8
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/src/ui/components/Job.tsx b/src/ui/components/Job.tsx
@@ -15,7 +15,26 @@ type FieldProps = {
 }
 
 const fieldComponents: Record<Field, React.FC<FieldProps>> = {
-  id: ({ job }) => <b>#{job.id}</b>,
+  id: ({ job }) => {
+    const displayTruncate = job.id && String(job.id).length > 10
+    const truncatedId = String(job.id).slice(0, 0)
+    const [showId, toggleId] = useState(false)
+
+    return (
+      <>
+        {displayTruncate ? (
+          <>
+            <button onClick={() => toggleId(!showId)}>Show full id</button>
+            <div style={{ fontWeight: 'bold' }}>
+              {showId ? job.id : truncatedId}
+            </div>
+          </>
+        ) : (
+          <b>{job.id}</b>
+        )}
+      </>
+    )
+  },
 
   timestamps: ({ job }) => (
     <div className="timestamps">