awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 12:27:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: lint

Browse Source
This commit is contained in:
Piyush Gupta
2025-10-14 00:14:37 +05:30
parent fc7dd6679d
commit 3a259b45ed
9 changed files with 51 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx
+5 -5
View File
@@ -17,10 +17,10 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
<img <img
alt={`${destinationDetails.name} logo`} alt={`${destinationDetails.name} logo`}
src={`/images/integrations/${destinationDetails.image}`} src={`/images/integrations/${destinationDetails.image}`}
className={`bg-bunker-500 h-12 w-12 rounded-md p-2 ${destinationDetails.imageClassName}`} className={`h-12 w-12 rounded-md bg-bunker-500 p-2 ${destinationDetails.imageClassName}`}
/> />
<div> <div>
<div className="text-mineshaft-300 flex items-center"> <div className="flex items-center text-mineshaft-300">
{destinationDetails.name} Sync {destinationDetails.name} Sync
<a <a
target="_blank" target="_blank"
@@ -28,8 +28,8 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
className="mb-1 ml-1" className="mb-1 ml-1"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100"> <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" /> <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span> <span>Docs</span>
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowUpRightFromSquare} icon={faArrowUpRightFromSquare}
@@ -38,7 +38,7 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
</div> </div>
</a> </a>
</div> </div>
<p className="text-mineshaft-400 text-sm leading-4"> <p className="text-sm leading-4 text-mineshaft-400">
{isConfigured {isConfigured
? `Edit ${destinationDetails.name} Sync` ? `Edit ${destinationDetails.name} Sync`
: `Sync secrets to ${destinationDetails.name}`} : `Sync secrets to ${destinationDetails.name}`}
frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
+5 -5
View File
@@ -78,7 +78,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
return ( return (
<> <>
<p className="text-bunker-300 mb-4 text-sm">Configure how secrets should be synced.</p> <p className="mb-4 text-sm text-bunker-300">Configure how secrets should be synced.</p>
{!hideInitialSync && ( {!hideInitialSync && (
<> <>
<Controller <Controller
@@ -101,7 +101,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
return ( return (
<li key={name}> <li key={name}>
<p className="text-mineshaft-300"> <p className="text-mineshaft-300">
<span className="text-bunker-200 font-medium">{name}</span>:{" "} <span className="font-medium text-bunker-200">{name}</span>:{" "}
{description} {description}
</p> </p>
</li> </li>
@@ -119,7 +119,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
isDisabled={!syncOption?.canImportSecrets} isDisabled={!syncOption?.canImportSecrets}
value={value} value={value}
onValueChange={(val) => onChange(val)} onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border" className="w-full border border-mineshaft-500"
position="popper" position="popper"
placeholder="Select an option..." placeholder="Select an option..."
dropdownContainerClassName="max-w-none" dropdownContainerClassName="max-w-none"
@@ -138,7 +138,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
)} )}
/> />
{!syncOption?.canImportSecrets && ( {!syncOption?.canImportSecrets && (
<p className="text-yellow -mt-2.5 mb-2.5 text-xs"> <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
<FontAwesomeIcon className="mr-1" size="xs" icon={faTriangleExclamation} /> <FontAwesomeIcon className="mr-1" size="xs" icon={faTriangleExclamation} />
{destinationName} only supports overwriting destination secrets.{" "} {destinationName} only supports overwriting destination secrets.{" "}
{!currentSyncOption.disableSecretDeletion && {!currentSyncOption.disableSecretDeletion &&
@@ -219,7 +219,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
return ( return (
<FormControl isError={Boolean(error)} errorText={error?.message}> <FormControl isError={Boolean(error)} errorText={error?.message}>
<Switch <Switch
className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 shadow-inner" className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
id="auto-sync-enabled" id="auto-sync-enabled"
thumbClassName="bg-mineshaft-800" thumbClassName="bg-mineshaft-800"
onCheckedChange={onChange} onCheckedChange={onChange}
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx
+10 -10
View File
@@ -179,8 +179,8 @@ export const SecretSyncReviewFields = () => {
return ( return (
<div className="mb-4 flex flex-col gap-6"> <div className="mb-4 flex flex-col gap-6">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b"> <div className="w-full border-b border-mineshaft-600">
<span className="text-mineshaft-300 text-sm">Source</span> <span className="text-sm text-mineshaft-300">Source</span>
</div> </div>
<div className="flex flex-wrap gap-x-8 gap-y-2"> <div className="flex flex-wrap gap-x-8 gap-y-2">
<GenericFieldLabel label="Environment">{environment.name}</GenericFieldLabel> <GenericFieldLabel label="Environment">{environment.name}</GenericFieldLabel>
@@ -188,14 +188,14 @@ export const SecretSyncReviewFields = () => {
</div> </div>
</div> </div>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="border-mineshaft-600 flex w-full items-center gap-2 border-b"> <div className="flex w-full items-center gap-2 border-b border-mineshaft-600">
<span className="text-mineshaft-300 text-sm">Destination</span> <span className="text-sm text-mineshaft-300">Destination</span>
{isChecking && <span className="text-mineshaft-400 text-xs">Checking...</span>} {isChecking && <span className="text-xs text-mineshaft-400">Checking...</span>}
</div> </div>
{hasDuplicate && ( {hasDuplicate && (
<div className="mb-2 flex items-start rounded-md border border-yellow-600 bg-yellow-900/20 px-3 py-2"> <div className="mb-2 flex items-start rounded-md border border-yellow-600 bg-yellow-900/20 px-3 py-2">
<div className="flex text-sm text-yellow-100"> <div className="flex text-sm text-yellow-100">
<FontAwesomeIcon icon={faWarning} className="mr-2 mt-1 text-yellow-600" /> <FontAwesomeIcon icon={faWarning} className="mt-1 mr-2 text-yellow-600" />
<div> <div>
<p> <p>
Another secret sync in your organization is already configured with the same Another secret sync in your organization is already configured with the same
@@ -219,8 +219,8 @@ export const SecretSyncReviewFields = () => {
</div> </div>
</div> </div>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b"> <div className="w-full border-b border-mineshaft-600">
<span className="text-mineshaft-300 text-sm">Sync Options</span> <span className="text-sm text-mineshaft-300">Sync Options</span>
</div> </div>
<div className="flex flex-wrap gap-x-8 gap-y-2"> <div className="flex flex-wrap gap-x-8 gap-y-2">
<GenericFieldLabel label="Auto-Sync"> <GenericFieldLabel label="Auto-Sync">
@@ -241,8 +241,8 @@ export const SecretSyncReviewFields = () => {
</div> </div>
</div> </div>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="border-mineshaft-600 w-full border-b"> <div className="w-full border-b border-mineshaft-600">
<span className="text-mineshaft-300 text-sm">Details</span> <span className="text-sm text-mineshaft-300">Details</span>
</div> </div>
<div className="flex flex-wrap gap-x-8 gap-y-2"> <div className="flex flex-wrap gap-x-8 gap-y-2">
<GenericFieldLabel label="Name">{name}</GenericFieldLabel> <GenericFieldLabel label="Name">{name}</GenericFieldLabel>
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionHeader.tsx
+8 -8
View File
@@ -14,22 +14,22 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
const appDetails = APP_CONNECTION_MAP[app]; const appDetails = APP_CONNECTION_MAP[app];
return ( return (
<div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4"> <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
<div className="relative"> <div className="relative">
<img <img
alt={`${appDetails.name} logo`} alt={`${appDetails.name} logo`}
src={`/images/integrations/${appDetails.image}`} src={`/images/integrations/${appDetails.image}`}
className={`bg-bunker-500 h-12 w-12 rounded-md p-2 ${appDetails.imageClassName}`} className={`h-12 w-12 rounded-md bg-bunker-500 p-2 ${appDetails.imageClassName}`}
/> />
{appDetails.icon && ( {appDetails.icon && (
<FontAwesomeIcon <FontAwesomeIcon
icon={appDetails.icon} icon={appDetails.icon}
className="text-primary-700 absolute bottom-1 right-1" className="absolute right-1 bottom-1 text-primary-700"
/> />
)} )}
</div> </div>
<div> <div>
<div className="text-mineshaft-300 flex items-center"> <div className="flex items-center text-mineshaft-300">
{appDetails.name} {appDetails.name}
<a <a
href={`https://infisical.com/docs/integrations/app-connections/${app}`} href={`https://infisical.com/docs/integrations/app-connections/${app}`}
@@ -37,8 +37,8 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
className="mb-1 ml-1" className="mb-1 ml-1"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100"> <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" /> <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span> <span>Docs</span>
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowUpRightFromSquare} icon={faArrowUpRightFromSquare}
@@ -47,14 +47,14 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
</div> </div>
</a> </a>
</div> </div>
<p className="text-mineshaft-400 text-sm leading-4"> <p className="text-sm leading-4 text-mineshaft-400">
{isConnected ? `${appDetails.name} Connection` : `Connect to ${appDetails.name}`} {isConnected ? `${appDetails.name} Connection` : `Connect to ${appDetails.name}`}
</p> </p>
</div> </div>
{onBack && ( {onBack && (
<button <button
type="button" type="button"
className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2" className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
onClick={onBack} onClick={onBack}
> >
Select another App Select another App
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx
+7 -7
View File
@@ -46,7 +46,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
return ( return (
<div className="flex h-full flex-col items-center justify-center py-2.5"> <div className="flex h-full flex-col items-center justify-center py-2.5">
<Spinner size="lg" className="text-mineshaft-500" /> <Spinner size="lg" className="text-mineshaft-500" />
<p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p> <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
</div> </div>
); );
} }
@@ -60,7 +60,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
placeholder="Search options..." placeholder="Search options..."
className="bg-mineshaft-800 placeholder:text-mineshaft-400" className="bg-mineshaft-800 placeholder:text-mineshaft-400"
/> />
<div className="h-118 grid grid-cols-4 content-start gap-2"> <div className="grid h-118 grid-cols-4 content-start gap-2">
{filteredOptions.slice(offset, perPage * page)?.map((option) => { {filteredOptions.slice(offset, perPage * page)?.map((option) => {
const { const {
image, image,
@@ -78,7 +78,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
? handlePopUpOpen("upgradePlan") ? handlePopUpOpen("upgradePlan")
: onSelect(option.app) : onSelect(option.app)
} }
className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200" className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
> >
{image && ( {image && (
<img <img
@@ -93,7 +93,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
{icon && ( {icon && (
<div className="relative"> <div className="relative">
<FontAwesomeIcon <FontAwesomeIcon
className="text-primary-700 absolute -bottom-1.5 -right-1.5" className="absolute -right-1.5 -bottom-1.5 text-primary-700"
size="xl" size="xl"
icon={icon} icon={icon}
/> />
@@ -127,7 +127,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
service you're looking for,`}{" "} service you're looking for,`}{" "}
<a <a
target="_blank" target="_blank"
className="hover:text-mineshaft-300 underline" className="underline hover:text-mineshaft-300"
href="https://infisical.com/slack" href="https://infisical.com/slack"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -136,7 +136,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
or{" "} or{" "}
<a <a
target="_blank" target="_blank"
className="hover:text-mineshaft-300 underline" className="underline hover:text-mineshaft-300"
href="https://github.com/Infisical/infisical/discussions" href="https://github.com/Infisical/infisical/discussions"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -147,7 +147,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
</> </>
} }
> >
<div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5"> <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
<span className="text-xs"> <span className="text-xs">
Don&#39;t see the third-party service you&#39;re looking for? Don&#39;t see the third-party service you&#39;re looking for?
</span> </span>
frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
+7 -7
View File
@@ -130,9 +130,9 @@ export const CloudIntegrationSection = ({
tabIndex={0} tabIndex={0}
className={`group relative ${ className={`group relative ${
cloudIntegration.isAvailable cloudIntegration.isAvailable
? "hover:bg-mineshaft-700 cursor-pointer duration-200" ? "cursor-pointer duration-200 hover:bg-mineshaft-700"
: "opacity-50" : "opacity-50"
} border-mineshaft-600 bg-mineshaft-800 flex h-36 flex-col items-center justify-center rounded-md border p-3`} } flex h-36 flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3`}
onClick={() => { onClick={() => {
if (isSyncAvailable) { if (isSyncAvailable) {
navigate({ navigate({
@@ -180,9 +180,9 @@ export const CloudIntegrationSection = ({
</div> </div>
{cloudIntegration.isAvailable && {cloudIntegration.isAvailable &&
Boolean(integrationAuths?.[cloudIntegration.slug]) && ( Boolean(integrationAuths?.[cloudIntegration.slug]) && (
<div className="absolute right-0 top-0 z-30 h-full"> <div className="absolute top-0 right-0 z-30 h-full">
<div className="relative h-full"> <div className="relative h-full">
<div className="bg-primary absolute right-0 top-0 w-24 flex-row items-center overflow-hidden whitespace-nowrap rounded-bl-md rounded-tr-md px-2 py-0.5 text-xs text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0"> <div className="absolute top-0 right-0 w-24 flex-row items-center overflow-hidden rounded-tr-md rounded-bl-md bg-primary px-2 py-0.5 text-xs whitespace-nowrap text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0">
<FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" /> <FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" />
Authorized Authorized
</div> </div>
@@ -197,7 +197,7 @@ export const CloudIntegrationSection = ({
provider: cloudIntegration.slug provider: cloudIntegration.slug
}); });
}} }}
className="bg-red absolute right-0 top-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md text-xs opacity-50 transition-all duration-300 hover:opacity-100 group-hover:h-full" className="absolute top-0 right-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md bg-red text-xs opacity-50 transition-all duration-300 group-hover:h-full hover:opacity-100"
> >
<FontAwesomeIcon icon={faXmark} size="xl" /> <FontAwesomeIcon icon={faXmark} size="xl" />
</div> </div>
@@ -208,7 +208,7 @@ export const CloudIntegrationSection = ({
{isSyncAvailable && ( {isSyncAvailable && (
<div className="absolute bottom-0 left-0 z-30 h-full w-full"> <div className="absolute bottom-0 left-0 z-30 h-full w-full">
<div className="relative h-full"> <div className="relative h-full">
<div className="bg-yellow/20 text-yellow absolute bottom-0 left-0 w-full flex-row overflow-hidden whitespace-nowrap rounded-bl-md rounded-br-md px-2 py-0.5 text-center text-xs"> <div className="absolute bottom-0 left-0 w-full flex-row overflow-hidden rounded-br-md rounded-bl-md bg-yellow/20 px-2 py-0.5 text-center text-xs whitespace-nowrap text-yellow">
Secret Sync Available Secret Sync Available
</div> </div>
</div> </div>
@@ -230,7 +230,7 @@ export const CloudIntegrationSection = ({
{Array.from({ length: 16 }).map((_, index) => ( {Array.from({ length: 16 }).map((_, index) => (
<div <div
key={`dummy-cloud-integration-${index + 1}`} key={`dummy-cloud-integration-${index + 1}`}
className="border-mineshaft-600 bg-mineshaft-800 h-32 animate-pulse rounded-md border" className="h-32 animate-pulse rounded-md border border-mineshaft-600 bg-mineshaft-800"
/> />
))} ))}
</div> </div>
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx
+3 -3
View File
@@ -72,7 +72,7 @@ const PageContent = () => {
return ( return (
<> <>
<div className="bg-bunker-800 font-inter container mx-auto flex flex-col justify-between text-white"> <div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter text-white">
<div className="mx-auto mb-6 w-full max-w-7xl"> <div className="mx-auto mb-6 w-full max-w-7xl">
<Button <Button
variant="link" variant="link"
@@ -96,11 +96,11 @@ const PageContent = () => {
<img <img
alt={`${destinationDetails.name} sync`} alt={`${destinationDetails.name} sync`}
src={`/images/integrations/${destinationDetails.image}`} src={`/images/integrations/${destinationDetails.image}`}
className="ml-1 mt-3 w-16" className="mt-3 ml-1 w-16"
/> />
<div> <div>
<p className="text-3xl font-medium text-white">{secretSync.name}</p> <p className="text-3xl font-medium text-white">{secretSync.name}</p>
<p className="text-bunker-300 leading-3">{destinationDetails.name} Sync</p> <p className="leading-3 text-bunker-300">{destinationDetails.name} Sync</p>
</div> </div>
<SecretSyncActionTriggers secretSync={secretSync} /> <SecretSyncActionTriggers secretSync={secretSync} />
</div> </div>
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx
+3 -3
View File
@@ -165,9 +165,9 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
: ProjectPermissionSub.SecretSyncs; : ProjectPermissionSub.SecretSyncs;
return ( return (
<div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3"> <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-2"> <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="text-mineshaft-100 font-medium">Destination Configuration</h3> <h3 className="font-medium text-mineshaft-100">Destination Configuration</h3>
<ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}> <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
{(isAllowed) => ( {(isAllowed) => (
<IconButton <IconButton
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx
+3 -3
View File
@@ -88,9 +88,9 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
return ( return (
<div> <div>
<div className="border-mineshaft-600 bg-mineshaft-900 flex w-full flex-col gap-3 rounded-lg border px-4 py-3"> <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-2"> <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="text-mineshaft-100 font-medium">Sync Options</h3> <h3 className="font-medium text-mineshaft-100">Sync Options</h3>
<ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}> <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
{(isAllowed) => ( {(isAllowed) => (
<IconButton <IconButton