Skip to content

Commit

Permalink
focus ring scurr
Browse files Browse the repository at this point in the history
  • Loading branch information
@n1ru4l
n1ru4l committed Jan 28, 2025
1 parent f182dd8 commit d2a31c5
Showing 1 changed file with 104 additions and 97 deletions.
201 changes: 104 additions & 97 deletions packages/web/app/src/components/organization/members/permission-selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,113 +121,120 @@ export function PermissionSelector(props: PermissionSelectorProps) {
!props.selectedPermissionIds.has(permission.dependsOnId);

return (
<div
className={cn(
'flex flex-row items-center justify-between space-x-4 border-orange-500 pb-2 text-sm',
focusedPermission === permission.id && '-m-[1px] border',
)}
key={permission.id}
data-permission-id={permission.id}
ref={ref => {
if (ref) {
permissionRefs.current.set(permission.id, ref);
}
}}
>
<div className={cn(needsDependency && 'opacity-30')}>
<div className="font-semibold text-white">{permission.title}</div>
<div className="text-xs text-gray-400">{permission.description}</div>
</div>
{permission.warning && props.selectedPermissionIds.has(permission.id) ? (
<div className="flex grow justify-end">
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<TriangleAlert className="text-yellow-700" />
</TooltipTrigger>
<TooltipContent>{permission.warning}</TooltipContent>
</Tooltip>
</TooltipProvider>
<div className="relative">
<div
className={cn(
'flex flex-row items-center justify-between space-x-4 pb-2 pr-2 text-sm',
)}
key={permission.id}
data-permission-id={permission.id}
ref={ref => {
if (ref) {
permissionRefs.current.set(permission.id, ref);
}
}}
>
<div className={cn(needsDependency && 'opacity-30')}>
<div className="font-semibold text-white">{permission.title}</div>
<div className="text-xs text-gray-400">{permission.description}</div>
</div>
) : (
!!permission.dependsOnId &&
permissionToGroupTitleMapping.has(permission.dependsOnId) && (
{permission.warning && props.selectedPermissionIds.has(permission.id) ? (
<div className="flex grow justify-end">
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<InfoIcon />
<TriangleAlert className="text-yellow-700" />
</TooltipTrigger>
<TooltipContent>
<p>
This permission depends on another permission.{' '}
<Button
variant="orangeLink"
onClick={() => {
const dependencyPermission = permission.dependsOnId;
if (!dependencyPermission) {
return;
}
const element =
permissionRefs.current.get(dependencyPermission);

if (!element) {
return;
}
setOpenAccordions(values => {
const groupName =
permissionToGroupTitleMapping.get(dependencyPermission);

if (groupName && values.includes(groupName) === false) {
return [...values, groupName];
}
return values;
});
setFocusedPermission(dependencyPermission);
element.scrollIntoView({ behavior: 'smooth' });
}}
>
View permission.
</Button>
</p>
</TooltipContent>
<TooltipContent>{permission.warning}</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
)
)}
<Select
disabled={props.isReadOnly || permission.isReadOnly || needsDependency}
value={
permission.isReadOnly || props.selectedPermissionIds.has(permission.id)
? 'allow'
: 'not-selected'
}
onValueChange={value => {
const dependents = dependencyGraph.get(permission.id) ?? [];
if (value === 'allow') {
props.onSelectedPermissionsChange(
new Set([...props.selectedPermissionIds, permission.id]),
);
} else if (value === 'not-selected') {
const selectedPermissionIds = new Set(props.selectedPermissionIds);
selectedPermissionIds.delete(permission.id);
for (const dependent of dependents) {
selectedPermissionIds.delete(dependent);
}
props.onSelectedPermissionsChange(selectedPermissionIds);
) : (
!!permission.dependsOnId &&
permissionToGroupTitleMapping.has(permission.dependsOnId) && (
<div className="flex grow justify-end">
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<InfoIcon />
</TooltipTrigger>
<TooltipContent>
<p>
This permission depends on another permission.{' '}
<Button
variant="orangeLink"
onClick={() => {
const dependencyPermission = permission.dependsOnId;
if (!dependencyPermission) {
return;
}
const element =
permissionRefs.current.get(dependencyPermission);

if (!element) {
return;
}
setOpenAccordions(values => {
const groupName =
permissionToGroupTitleMapping.get(dependencyPermission);

if (groupName && values.includes(groupName) === false) {
return [...values, groupName];
}
return values;
});
setFocusedPermission(dependencyPermission);
element.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}}
>
View permission.
</Button>
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
)
)}
<Select
disabled={props.isReadOnly || permission.isReadOnly || needsDependency}
value={
permission.isReadOnly || props.selectedPermissionIds.has(permission.id)
? 'allow'
: 'not-selected'
}
setFocusedPermission(null);
}}
>
<SelectTrigger className="w-[150px] shrink-0">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="not-selected">Not Selected</SelectItem>
<SelectItem value="allow">Allow</SelectItem>
</SelectContent>
</Select>
onValueChange={value => {
const dependents = dependencyGraph.get(permission.id) ?? [];
if (value === 'allow') {
props.onSelectedPermissionsChange(
new Set([...props.selectedPermissionIds, permission.id]),
);
} else if (value === 'not-selected') {
const selectedPermissionIds = new Set(props.selectedPermissionIds);
selectedPermissionIds.delete(permission.id);
for (const dependent of dependents) {
selectedPermissionIds.delete(dependent);
}
props.onSelectedPermissionsChange(selectedPermissionIds);
}
setFocusedPermission(null);
}}
>
<SelectTrigger className="w-[150px] shrink-0">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="not-selected">Not Selected</SelectItem>
<SelectItem value="allow">Allow</SelectItem>
</SelectContent>
</Select>
</div>
{focusedPermission === permission.id && (
<div className="pointer-events-none absolute bottom-[3px] left-[-7px] right-0 top-[-4px] rounded-sm border border-yellow-400" />
)}
</div>
);
})}
Expand Down

0 comments on commit d2a31c5

Please sign in to comment.