mirror of
https://github.com/supabase/supabase.git
synced 2026-06-17 13:14:06 +08:00
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { ChevronDown, ChevronRight } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
|
|
|
|
import { PermissionsList } from './PermissionList'
|
|
|
|
const PERMISSIONS_COLLAPSE_THRESHOLD = 5
|
|
|
|
interface TokenPermissionsSectionProps {
|
|
groupedPermissions: Record<string, string[]>
|
|
totalCount: number
|
|
}
|
|
|
|
export const TokenPermissionsSection = ({
|
|
groupedPermissions,
|
|
totalCount,
|
|
}: TokenPermissionsSectionProps) => {
|
|
const [permissionsOpen, setPermissionsOpen] = useState(false)
|
|
const shouldCollapse = totalCount > PERMISSIONS_COLLAPSE_THRESHOLD
|
|
|
|
if (totalCount === 0) return null
|
|
|
|
return (
|
|
<div className="pt-4 border-t border-default">
|
|
{shouldCollapse ? (
|
|
<Collapsible open={permissionsOpen} onOpenChange={setPermissionsOpen}>
|
|
<CollapsibleTrigger asChild>
|
|
<Button
|
|
variant="text"
|
|
size="tiny"
|
|
className="w-full justify-start px-0.5 h-auto text-sm font-medium text-foreground-light hover:text-foreground"
|
|
>
|
|
<div className="flex items-center gap-1.5">
|
|
{permissionsOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
|
<span>Permissions assigned to this token ({totalCount})</span>
|
|
</div>
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent className="pt-3 transition-all data-closed:animate-collapsible-up data-open:animate-collapsible-down">
|
|
<PermissionsList groupedPermissions={groupedPermissions} />
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
) : (
|
|
<>
|
|
<h3 className="text-sm font-medium mb-3">Permissions assigned to this token:</h3>
|
|
<PermissionsList groupedPermissions={groupedPermissions} />
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|