@@ -7,13 +7,22 @@ import {
77 deleteAttributeDefinition ,
88} from '../api/attributeDefinitions'
99import { CopyableId } from '../components/CopyableId'
10- import { SUPPORTED_ENTITY_TYPES } from '../types/attributeDefinition'
10+ import {
11+ SUPPORTED_ENTITY_TYPES ,
12+ type AttributeDefinition ,
13+ } from '../types/attributeDefinition'
1114
12- const VALUE_TYPE_BADGE : Record < string , string > = {
13- string : 'bg-blue-100 text-blue-700' ,
14- integer : 'bg-purple-100 text-purple-700' ,
15- boolean : 'bg-amber-100 text-amber-700' ,
16- list : 'bg-green-100 text-green-700' ,
15+ // Renders a value_type as a type-signature string, e.g.:
16+ // string
17+ // string ∈ {read, write, admin}
18+ // list<string>
19+ // list<string> ∈ {us, eu}
20+ function formatValueType ( def : AttributeDefinition ) : string {
21+ const base = def . value_type === 'list' ? 'list<string>' : def . value_type
22+ if ( def . allowed_values && def . allowed_values . length > 0 ) {
23+ return `${ base } ∈ {${ def . allowed_values . join ( ', ' ) } }`
24+ }
25+ return base
1726}
1827
1928export function AttributeDefinitionsPage ( ) {
@@ -147,36 +156,38 @@ export function AttributeDefinitionsPage() {
147156 < table className = "w-full text-sm" >
148157 < thead className = "bg-gray-50 border-b border-gray-200" >
149158 < tr >
159+ < th className = "text-left px-4 py-3 font-medium text-gray-600 text-xs" > Name</ th >
150160 < th className = "text-left px-4 py-3 font-medium text-gray-600 text-xs" > Key</ th >
151161 < th className = "text-left px-4 py-3 font-medium text-gray-600 text-xs" > ID</ th >
152- < th className = "text-left px-4 py-3 font-medium text-gray-600 text-xs" > Entity</ th >
153- < th className = "text-left px-4 py-3 font-medium text-gray-600 text-xs" > Display Name</ th >
154162 < th className = "text-left px-4 py-3 font-medium text-gray-600 text-xs" > Type</ th >
155- < th className = "text-left px-4 py-3 font-medium text-gray-600 text-xs" > Allowed Values</ th >
156163 < th className = "text-left px-4 py-3 font-medium text-gray-600 text-xs" > Default</ th >
157164 < th className = "px-4 py-3 font-medium text-gray-600 text-xs text-right" > Actions</ th >
158165 </ tr >
159166 </ thead >
160167 < tbody className = "divide-y divide-gray-100" >
161168 { items . map ( ( def ) => (
162169 < tr key = { def . id } className = "hover:bg-gray-50 transition-colors" >
163- < td className = "px-4 py-3 font-mono text-sm" > { def . key } </ td >
164170 < td className = "px-4 py-3" >
165- < CopyableId id = { def . id } short />
171+ < div className = "font-medium text-gray-900" > { def . display_name } </ div >
172+ { def . description && (
173+ < div
174+ className = "text-xs text-gray-500 mt-0.5 truncate max-w-xs"
175+ title = { def . description }
176+ >
177+ { def . description }
178+ </ div >
179+ ) }
166180 </ td >
167- < td className = "px-4 py-3 text-gray-500" > { def . entity_type } </ td >
168- < td className = "px-4 py-3" > { def . display_name } </ td >
169181 < td className = "px-4 py-3" >
170- < span
171- className = { `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${ VALUE_TYPE_BADGE [ def . value_type ] ?? 'bg-gray-100 text-gray-700' } ` }
172- >
173- { def . value_type }
174- </ span >
182+ < code className = "inline-block font-mono text-xs text-gray-600 bg-gray-100 rounded px-1.5 py-0.5" >
183+ { `{${ def . entity_type } .${ def . key } }` }
184+ </ code >
175185 </ td >
176- < td className = "px-4 py-3 text-gray-500" >
177- { def . allowed_values
178- ? def . allowed_values . join ( ', ' )
179- : < span className = "text-gray-300" > any</ span > }
186+ < td className = "px-4 py-3" >
187+ < CopyableId id = { def . id } short />
188+ </ td >
189+ < td className = "px-4 py-3 font-mono text-xs text-gray-600" >
190+ { formatValueType ( def ) }
180191 </ td >
181192 < td className = "px-4 py-3 text-gray-500" >
182193 { def . default_value != null
0 commit comments