73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import { Badge, Box, Text } from '@traefiklabs/faency'
|
|
|
|
import Tooltip from 'components/Tooltip'
|
|
import { MiddlewareProps, ValuesMapType } from 'hooks/use-resource-detail'
|
|
|
|
function capitalize(word: string): string {
|
|
return word.charAt(0).toUpperCase() + word.slice(1)
|
|
}
|
|
|
|
function quote(value: string | number): string | number {
|
|
if (typeof value === 'string') {
|
|
return `"${value}"`
|
|
}
|
|
|
|
return value
|
|
}
|
|
|
|
function quoteArray(values: (string | number)[]): (string | number)[] {
|
|
return values.map(quote)
|
|
}
|
|
|
|
const renderFeatureValues = (valuesMap: ValuesMapType): string => {
|
|
return Object.entries(valuesMap)
|
|
.map(([name, value]) => {
|
|
const capitalizedName = capitalize(name)
|
|
if (typeof value === 'string') {
|
|
return [capitalizedName, `"${value}"`].join('=')
|
|
}
|
|
|
|
if (value instanceof Array) {
|
|
return [capitalizedName, quoteArray(value).join(', ')].join('=')
|
|
}
|
|
|
|
if (typeof value === 'object') {
|
|
return [capitalizedName, `{${renderFeatureValues(value)}}`].join('=')
|
|
}
|
|
|
|
return [capitalizedName, value].join('=')
|
|
})
|
|
.join(', ')
|
|
}
|
|
|
|
const FeatureMiddleware = ({ middleware }: { middleware: MiddlewareProps }) => {
|
|
const [name, value] = Object.entries(middleware)[0]
|
|
const content = `${capitalize(name)}: ${renderFeatureValues(value)}`
|
|
|
|
return (
|
|
<Tooltip label={content} action="copy">
|
|
<Badge variant="blue" css={{ mr: '$2', mt: '$2' }}>
|
|
{content}
|
|
</Badge>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
type AdditionalFeaturesProps = {
|
|
middlewares?: MiddlewareProps[]
|
|
uid: string
|
|
}
|
|
|
|
const AdditionalFeatures = ({ middlewares, uid }: AdditionalFeaturesProps) => {
|
|
return middlewares?.length ? (
|
|
<Box css={{ mt: '-$2' }}>
|
|
{middlewares.map((m, idx) => (
|
|
<FeatureMiddleware key={`${uid}-${idx}`} middleware={m} />
|
|
))}
|
|
</Box>
|
|
) : (
|
|
<Text css={{ fontStyle: 'italic', color: 'hsl(0, 0%, 56%)' }}>No additional features</Text>
|
|
)
|
|
}
|
|
|
|
export default AdditionalFeatures
|