awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-20 21:18:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: minor tw4 fixes and lint tw format

Browse Source
This commit is contained in:
Scott Wilson
2025-10-10 10:41:20 -07:00
parent bf5a291e87
commit 29b2333781
838 changed files with 3509 additions and 3511 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx
+2 -2
View File
@@ -20,8 +20,8 @@ export const PamAccountsPage = () => {
I={ProjectPermissionPamAccountActions.Read}
a={ProjectPermissionSub.PamAccounts}
>
<div className="h-full bg-bunker-800">
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 h-full">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title="Accounts" description="View, access, and manage accounts." />
<PamAccountsSection />
frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx
+3 -3
View File
@@ -12,7 +12,7 @@ type Props = {
export const AccountViewToggle = ({ value, onChange }: Props) => {
return (
<div className="flex gap-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
<div className="border-mineshaft-600 bg-mineshaft-800 flex gap-0.5 rounded-md border p-1">
<Button
variant="outline_bg"
onClick={() => {
@@ -21,7 +21,7 @@ export const AccountViewToggle = ({ value, onChange }: Props) => {
size="xs"
className={`${
value === AccountView.Flat ? "bg-mineshaft-500" : "bg-transparent"
} min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
} hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`}
>
Hide Folders
</Button>
@@ -33,7 +33,7 @@ export const AccountViewToggle = ({ value, onChange }: Props) => {
size="xs"
className={`${
value === AccountView.Nested ? "bg-mineshaft-500" : "bg-transparent"
} min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
} hover:bg-mineshaft-600 min-w-[2.4rem] rounded border-none`}
>
Show Folders
</Button>
frontend/src/pages/pam/PamAccountsPage/components/PamAccessAccountModal.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ export const PamAccessAccountModal = ({ isOpen, onOpenChange, account }: Props)
<a
href="https://infisical.com/docs/cli/overview"
target="_blank"
className="mt-2 flex h-4 w-fit items-center gap-2 border-b border-mineshaft-400 text-sm text-mineshaft-400 transition-colors duration-100 hover:border-yellow-400 hover:text-yellow-400"
className="border-mineshaft-400 text-mineshaft-400 mt-2 flex h-4 w-fit items-center gap-2 border-b text-sm transition-colors duration-100 hover:border-yellow-400 hover:text-yellow-400"
rel="noreferrer"
>
<span>Install the Infisical CLI</span>
frontend/src/pages/pam/PamAccountsPage/components/PamAccountHeader.tsx
+5 -5
View File
@@ -10,20 +10,20 @@ export const PamAccountHeader = ({ resourceName, resourceType, onBack }: Props)
const details = PAM_RESOURCE_TYPE_MAP[resourceType];
return (
<div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
<div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
<img
alt={`${details.name} logo`}
src={`/images/integrations/${details.image}`}
className="h-12 w-12 rounded-md bg-bunker-500 p-2"
className="bg-bunker-500 h-12 w-12 rounded-md p-2"
/>
<div>
<div className="flex items-center text-mineshaft-300">{resourceName}</div>
<p className="text-sm leading-4 text-mineshaft-400">{details.name} resource</p>
<div className="text-mineshaft-300 flex items-center">{resourceName}</div>
<p className="text-mineshaft-400 text-sm leading-4">{details.name} resource</p>
</div>
{onBack && (
<button
type="button"
className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
onClick={onBack}
>
Select another resource
frontend/src/pages/pam/PamAccountsPage/components/PamAccountRow.tsx
+2 -2
View File
@@ -86,14 +86,14 @@ export const PamAccountRow = ({
<span>
<HighlightText text={name} highlight={search} />
</span>
<Badge className="flex h-5 w-min items-center gap-1.5 bg-bunker-300/20 whitespace-nowrap text-bunker-300">
<Badge className="bg-bunker-300/20 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<FontAwesomeIcon icon={faBoxOpen} />
<span>
<HighlightText text={account.resource.name} highlight={search} />
</span>
</Badge>
{isFlatView && accountPath && (
<Badge className="flex h-5 w-min items-center gap-1.5 bg-bunker-300/20 whitespace-nowrap text-bunker-300">
<Badge className="bg-bunker-300/20 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<FontAwesomeIcon icon={faFolder} />
<span>
<HighlightText text={accountPath} highlight={search} />
frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
+3 -3
View File
@@ -296,14 +296,14 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
variant="plain"
size="sm"
className={twMerge(
"flex h-10 min-w-10 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
"border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 min-w-10 items-center justify-center overflow-hidden border p-0 transition-all",
isTableFiltered && "border-primary/50 text-primary"
)}
>
<FontAwesomeIcon icon={faFilter} />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
<DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
<DropdownMenuLabel>Resource</DropdownMenuLabel>
{uniqueResources.length ? (
uniqueResources.map((resource) => {
@@ -370,7 +370,7 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
<IconButton
variant="outline_bg"
ariaLabel="add-folder-or-import"
className="rounded-l-none bg-mineshaft-600 p-3"
className="bg-mineshaft-600 rounded-l-none p-3"
>
<FontAwesomeIcon icon={faAngleDown} />
</IconButton>
frontend/src/pages/pam/PamAccountsPage/components/PamFolderRow.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ type Props = {
export const PamFolderRow = ({ folder, onClick, onDelete, onUpdate, search }: Props) => {
return (
<Tr
className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
className="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
onClick={onClick}
>
<Td>
@@ -48,7 +48,7 @@ export const PamFolderRow = ({ folder, onClick, onDelete, onUpdate, search }: Pr
<IconButton
ariaLabel="Options"
colorSchema="secondary"
className="hidden w-6 group-hover:flex data-[state=open]:flex!"
className="data-[state=open]:flex! hidden w-6 group-hover:flex"
variant="plain"
>
<FontAwesomeIcon icon={faEllipsisV} />
frontend/src/pages/pam/PamAccountsPage/components/PamResourceOption.tsx
+4 -4
View File
@@ -19,15 +19,15 @@ export const PamResourceOption = ({
<components.Option isSelected={isSelected} {...props}>
<div className="flex flex-row items-center justify-between">
{isCreateOption ? (
<div className="flex items-center gap-x-1 text-mineshaft-400">
<div className="text-mineshaft-400 flex items-center gap-x-1">
<FontAwesomeIcon icon={faPlus} size="sm" />
<span className="mr-auto">Create New Resource</span>
</div>
) : (
<>
<p className="truncate">{children}</p>
<div className="mr-auto ml-2">
<Badge className="flex h-5 items-center gap-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<div className="ml-2 mr-auto">
<Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 items-center gap-1 whitespace-nowrap">
<img
alt={`${name} logo`}
src={`/images/integrations/${image}`}
@@ -37,7 +37,7 @@ export const PamResourceOption = ({
</Badge>
</div>
{isSelected && (
<FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
<FontAwesomeIcon className="text-primary ml-2" icon={faCheckCircle} size="sm" />
)}
</>
)}
frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export const ResourceSelect = ({ onSubmit, projectId }: Props) => {
return (
<div className="flex h-full flex-col items-center justify-center py-2.5">
<Spinner size="lg" className="text-mineshaft-500" />
<p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
<p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
</div>
);
}
frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx
+2 -2
View File
@@ -20,8 +20,8 @@ export const PamResourcesPage = () => {
I={ProjectPermissionPamAccountActions.Read}
a={ProjectPermissionSub.PamResources}
>
<div className="h-full bg-bunker-800">
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 h-full">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Resources"
frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/GenericResourceFields.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export const GenericResourceFields = () => {
<Select
value={value || (null as unknown as string)}
onValueChange={onChange}
className="w-full border border-mineshaft-500"
className="border-mineshaft-500 w-full border"
dropdownContainerClassName="max-w-none"
isLoading={isGatewaysLoading}
placeholder="Select a Gateway..."
frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/shared/SqlResourceFields.tsx
+9 -9
View File
@@ -17,11 +17,11 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
const sslEnabled = watch("connectionDetails.sslEnabled");
return (
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
<Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
<Tab
className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
`outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
selected ? "border-mineshaft-300 text-mineshaft-200 border-b-2" : "text-bunker-300"
}`
}
>
@@ -29,15 +29,15 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
</Tab>
<Tab
className={({ selected }) =>
`-mb-[0.14rem] w-30 px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
`outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
selected ? "border-mineshaft-300 text-mineshaft-200 border-b-2" : "text-bunker-300"
}`
}
>
SSL ({sslEnabled ? "Enabled" : "Disabled"})
</Tab>
</Tab.List>
<Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
<Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
<Tab.Panel>
<div className="mt-[0.675rem] flex items-start gap-2">
<Controller
@@ -91,7 +91,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl isError={Boolean(error?.message)} errorText={error?.message}>
<Switch
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
id="ssl-enabled"
thumbClassName="bg-mineshaft-800"
isChecked={value}
@@ -113,7 +113,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
label="SSL Certificate"
isOptional
>
<TextArea className="h-14 resize-none!" {...field} isDisabled={!sslEnabled} />
<TextArea className="resize-none! h-14" {...field} isDisabled={!sslEnabled} />
</FormControl>
)}
/>
@@ -127,7 +127,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
errorText={error?.message}
>
<Switch
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
id="ssl-reject-unauthorized"
thumbClassName="bg-mineshaft-800"
isChecked={sslEnabled ? value : false}
frontend/src/pages/pam/PamResourcesPage/components/PamResourceHeader.tsx
+5 -5
View File
@@ -9,20 +9,20 @@ export const PamResourceHeader = ({ resourceType, onBack }: Props) => {
const details = PAM_RESOURCE_TYPE_MAP[resourceType];
return (
<div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
<div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
<img
alt={`${details.name} logo`}
src={`/images/integrations/${details.image}`}
className="h-12 w-12 rounded-md bg-bunker-500 p-2"
className="bg-bunker-500 h-12 w-12 rounded-md p-2"
/>
<div>
<div className="flex items-center text-mineshaft-300">{details.name}</div>
<p className="text-sm leading-4 text-mineshaft-400">Resource</p>
<div className="text-mineshaft-300 flex items-center">{details.name}</div>
<p className="text-mineshaft-400 text-sm leading-4">Resource</p>
</div>
{onBack && (
<button
type="button"
className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
onClick={onBack}
>
Select another resource type
frontend/src/pages/pam/PamResourcesPage/components/PamResourceRow.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export const PamResourceRow = ({ resource, onUpdate, onDelete, search }: Props)
<span>
<HighlightText text={name} highlight={search} />
</span>
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<span>
<HighlightText text={resourceTypeName} highlight={search} />
</span>
frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx
+2 -2
View File
@@ -178,14 +178,14 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => {
variant="plain"
size="sm"
className={twMerge(
"flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
"border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
isTableFiltered && "border-primary/50 text-primary"
)}
>
<FontAwesomeIcon icon={faFilter} />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
<DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
<DropdownMenuLabel>Resource Type</DropdownMenuLabel>
{resources.length ? (
[...new Set(resources.map(({ resourceType }) => resourceType))].map((type) => {
frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx
+6 -6
View File
@@ -81,7 +81,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
return (
<div className="flex h-full flex-col items-center justify-center py-2.5">
<Spinner size="lg" className="text-mineshaft-500" />
<p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
<p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
</div>
);
}
@@ -95,7 +95,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
placeholder="Search options..."
className="bg-mineshaft-800 placeholder:text-mineshaft-400"
/>
<div className="grid h-118 grid-cols-4 content-start gap-2">
<div className="h-118 grid grid-cols-4 content-start gap-2">
{filteredOptions.slice(offset, perPage * page)?.map((option) => {
const { image, name, size = 50 } = PAM_RESOURCE_TYPE_MAP[option.resource];
@@ -103,7 +103,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
<button
type="button"
onClick={() => handleResourceSelect(option.resource)}
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"
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"
>
<div className="relative">
<img
@@ -142,7 +142,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
{"If you don't see the resource you're looking for,"}{" "}
<a
target="_blank"
className="underline hover:text-mineshaft-300"
className="hover:text-mineshaft-300 underline"
href="https://infisical.com/slack"
rel="noopener noreferrer"
>
@@ -151,7 +151,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
or{" "}
<a
target="_blank"
className="underline hover:text-mineshaft-300"
className="hover:text-mineshaft-300 underline"
href="https://github.com/Infisical/infisical/discussions"
rel="noopener noreferrer"
>
@@ -162,7 +162,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
</>
}
>
<div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
<div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
<span className="text-xs">Don&#39;t see the resource you&#39;re looking for?</span>
<FontAwesomeIcon size="xs" icon={faInfoCircle} />
</div>
frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const Page = () => {
const { data: session } = useGetPamSessionById(sessionId);
return (
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
{session && (
<div className="mx-auto mb-6 flex w-full max-w-7xl flex-col">
<PageHeader
frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionDetailsSection.tsx
+5 -5
View File
@@ -42,11 +42,11 @@ export const PamSessionDetailsSection = ({
const details = PAM_RESOURCE_TYPE_MAP[resourceType];
return (
<div className="max-w-[350px] rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">Session Details</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 max-w-[350px] rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">Session Details</h3>
</div>
<div className="pt-4 text-sm text-mineshaft-300">
<div className="text-mineshaft-300 pt-4 text-sm">
<DetailItem label="Session ID">
<div className="group flex align-top">
<p className="truncate">{id}</p>
@@ -76,7 +76,7 @@ export const PamSessionDetailsSection = ({
className="size-4"
/>
<p>{accountName}</p>
<Badge className="flex h-5 w-min items-center gap-1.5 bg-yellow/20 whitespace-nowrap text-yellow">
<Badge className="bg-yellow/20 text-yellow flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<FontAwesomeIcon icon={faBoxOpen} />
{resourceName}
</Badge>
frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+10 -10
View File
@@ -24,9 +24,9 @@ export const PamSessionLogsSection = ({ session }: Props) => {
};
return (
<div className="flex h-full w-full flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">Session Logs</h3>
<div className="border-mineshaft-600 bg-mineshaft-900 flex h-full w-full flex-col gap-4 rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">Session Logs</h3>
</div>
<div className="flex flex-col gap-2 overflow-y-auto text-xs">
{session.commandLogs.length > 0 ? (
@@ -36,13 +36,13 @@ export const PamSessionLogsSection = ({ session }: Props) => {
<button
type="button"
key={log.timestamp}
className={`flex w-full flex-col rounded-md border border-mineshaft-700 p-3 text-left focus:ring-2 focus:ring-mineshaft-400 focus:outline-hidden ${
className={`border-mineshaft-700 focus:ring-mineshaft-400 focus:outline-hidden flex w-full flex-col rounded-md border p-3 text-left focus:ring-2 ${
isExpanded ? "bg-mineshaft-700" : "bg-mineshaft-800 hover:bg-mineshaft-700"
}`}
onClick={() => toggleExpand(log.timestamp)}
>
<div className="flex items-center justify-between text-bunker-400">
<div className="flex items-center gap-2 select-none">
<div className="text-bunker-400 flex items-center justify-between">
<div className="flex select-none items-center gap-2">
<FontAwesomeIcon
icon={isExpanded ? faChevronDown : faChevronRight}
className="size-3 transition-transform duration-200"
@@ -53,14 +53,14 @@ export const PamSessionLogsSection = ({ session }: Props) => {
<div
className={`mt-2 font-mono ${
isExpanded ? "break-all whitespace-pre-wrap" : "truncate"
isExpanded ? "whitespace-pre-wrap break-all" : "truncate"
}`}
>
{log.input}
</div>
{isExpanded && log.output && (
<div className="mt-2 border-t border-mineshaft-700 pt-2 font-mono break-all whitespace-pre-wrap text-bunker-300">
<div className="border-mineshaft-700 text-bunker-300 mt-2 whitespace-pre-wrap break-all border-t pt-2 font-mono">
{log.output}
</div>
)}
@@ -68,11 +68,11 @@ export const PamSessionLogsSection = ({ session }: Props) => {
);
})
) : (
<div className="flex w-full grow items-center justify-center text-bunker-300">
<div className="text-bunker-300 flex w-full grow items-center justify-center">
{session.startedAt && session.endedAt ? (
<div className="text-center">
<div className="mb-2">Session logs are not yet available</div>
<div className="text-xs text-bunker-400">
<div className="text-bunker-400 text-xs">
Logs will be uploaded after the session duration has elapsed.
<br />
If logs do not appear after some time, please contact your Gateway administrators.
frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx
+2 -2
View File
@@ -20,8 +20,8 @@ export const PamSessionPage = () => {
I={ProjectPermissionPamSessionActions.Read}
a={ProjectPermissionSub.PamSessions}
>
<div className="h-full bg-bunker-800">
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="bg-bunker-800 h-full">
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Sessions"
frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx
+8 -8
View File
@@ -60,7 +60,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
return (
<>
<Tr
className={twMerge("group h-10 cursor-pointer hover:bg-bunker-400/20")}
className={twMerge("hover:bg-bunker-400/20 group h-10 cursor-pointer")}
onClick={() => router.history.push(`/projects/pam/${projectId}/sessions/${id}`)}
>
<Td>
@@ -77,7 +77,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
<span>
<HighlightText text={accountName} highlight={search} />
</span>
<div className="flex items-center gap-1 text-xs text-bunker-300">
<div className="text-bunker-300 flex items-center gap-1 text-xs">
<FontAwesomeIcon icon={faBoxOpen} className="size-3" />
<span>
<HighlightText text={resourceName} highlight={search} />
@@ -92,7 +92,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
<span>
<HighlightText text={actorName} highlight={search} />
</span>
<span className="text-xs text-bunker-300">
<span className="text-bunker-300 text-xs">
<HighlightText text={actorEmail} highlight={search} />
</span>
</div>
@@ -100,7 +100,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
<Td>
<div className="flex flex-col">
<span>{new Date(createdAt).toLocaleTimeString()}</span>
<span className="text-xs text-bunker-300">
<span className="text-bunker-300 text-xs">
{new Date(createdAt).toLocaleDateString()}
</span>
</div>
@@ -109,7 +109,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
{endedAt ? (
<div className="flex flex-col">
<span>{new Date(endedAt).toLocaleTimeString()}</span>
<span className="text-xs text-bunker-300">
<span className="text-bunker-300 text-xs">
{new Date(endedAt).toLocaleDateString()}
</span>
</div>
@@ -161,7 +161,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
<Td colSpan={5} className="py-3 text-xs">
{logsToShow.map((log) => (
<div key={`${id}-log-${log.timestamp}`} className="mb-4 flex flex-col last:mb-0">
<div className="flex items-center gap-1.5 text-bunker-400">
<div className="text-bunker-400 flex items-center gap-1.5">
<FontAwesomeIcon icon={faTerminal} className="size-3" />
<span>{new Date(log.timestamp).toLocaleString()}</span>
</div>
@@ -169,7 +169,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
<div className="font-mono">
<HighlightText text={log.input.trim()} highlight={search} />
</div>
<div className="font-mono text-bunker-300">
<div className="text-bunker-300 font-mono">
<HighlightText text={log.output.trim()} highlight={search} />
</div>
</div>
@@ -181,7 +181,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
size="xs"
leftIcon={<FontAwesomeIcon icon={showAllLogs ? faChevronUp : faChevronDown} />}
onClick={() => setShowAllLogs(!showAllLogs)}
className="p-0 text-mineshaft-300 hover:text-primary"
className="text-mineshaft-300 hover:text-primary p-0"
>
{showAllLogs
? "Show less"
frontend/src/pages/pam/PamSessionsPage/components/PamSessionsTable.tsx
+2 -2
View File
@@ -242,14 +242,14 @@ export const PamSessionsTable = ({ sessions }: Props) => {
variant="plain"
size="sm"
className={twMerge(
"flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
"border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
isTableFiltered && "border-primary/50 text-primary"
)}
>
<FontAwesomeIcon icon={faFilter} />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
<DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
<DropdownMenuLabel>Session Status</DropdownMenuLabel>
{sessions.length ? (
[...new Set(sessions.map(({ status }) => status))].map((status) => {
frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ export const SettingsPage = () => {
const { t } = useTranslation();
return (
<div className="flex h-full w-full justify-center bg-bunker-800 text-white">
<div className="bg-bunker-800 flex h-full w-full justify-center text-white">
<Helmet>
<title>{t("common.head-title", { title: t("settings.project.title") })}</title>
</Helmet>