mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-20 21:18:18 +00:00
feat: upgraded to tw v4
This commit is contained in:
@@ -23,7 +23,7 @@ export const PamAccountHeader = ({ resourceName, resourceType, onBack }: Props)
|
||||
{onBack && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-auto mt-1 text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
|
||||
className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
|
||||
onClick={onBack}
|
||||
>
|
||||
Select another resource
|
||||
|
||||
@@ -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 whitespace-nowrap bg-bunker-300/20 text-bunker-300">
|
||||
<Badge className="flex h-5 w-min items-center gap-1.5 bg-bunker-300/20 whitespace-nowrap text-bunker-300">
|
||||
<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 whitespace-nowrap bg-bunker-300/20 text-bunker-300">
|
||||
<Badge className="flex h-5 w-min items-center gap-1.5 bg-bunker-300/20 whitespace-nowrap text-bunker-300">
|
||||
<FontAwesomeIcon icon={faFolder} />
|
||||
<span>
|
||||
<HighlightText text={accountPath} highlight={search} />
|
||||
|
||||
@@ -303,7 +303,7 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
|
||||
<FontAwesomeIcon icon={faFilter} />
|
||||
</IconButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
|
||||
<DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
|
||||
<DropdownMenuLabel>Resource</DropdownMenuLabel>
|
||||
{uniqueResources.length ? (
|
||||
uniqueResources.map((resource) => {
|
||||
|
||||
@@ -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="hidden w-6 group-hover:flex data-[state=open]:flex!"
|
||||
variant="plain"
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisV} />
|
||||
|
||||
@@ -26,8 +26,8 @@ export const PamResourceOption = ({
|
||||
) : (
|
||||
<>
|
||||
<p className="truncate">{children}</p>
|
||||
<div className="ml-2 mr-auto">
|
||||
<Badge className="flex h-5 items-center gap-1 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
|
||||
<div className="mr-auto ml-2">
|
||||
<Badge className="flex h-5 items-center gap-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
|
||||
<img
|
||||
alt={`${name} logo`}
|
||||
src={`/images/integrations/${image}`}
|
||||
|
||||
+5
-5
@@ -20,7 +20,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
|
||||
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-30 -mb-[0.14rem] px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
|
||||
`-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"
|
||||
}`
|
||||
}
|
||||
@@ -29,7 +29,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-30 -mb-[0.14rem] px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
|
||||
`-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"
|
||||
}`
|
||||
}
|
||||
@@ -37,7 +37,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
|
||||
SSL ({sslEnabled ? "Enabled" : "Disabled"})
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels className="mb-4 rounded border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
|
||||
<Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
|
||||
<Tab.Panel>
|
||||
<div className="mt-[0.675rem] flex items-start gap-2">
|
||||
<Controller
|
||||
@@ -113,7 +113,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
|
||||
label="SSL Certificate"
|
||||
isOptional
|
||||
>
|
||||
<TextArea className="h-[3.5rem] !resize-none" {...field} isDisabled={!sslEnabled} />
|
||||
<TextArea className="h-14 resize-none!" {...field} isDisabled={!sslEnabled} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
@@ -134,7 +134,7 @@ export const SqlResourceFields = ({ setSelectedTabIndex, selectedTabIndex }: Pro
|
||||
onCheckedChange={onChange}
|
||||
isDisabled={!sslEnabled}
|
||||
>
|
||||
<p className="w-[9.5rem]">
|
||||
<p className="w-38">
|
||||
Reject Unauthorized
|
||||
<Tooltip
|
||||
className="max-w-md"
|
||||
|
||||
@@ -22,7 +22,7 @@ export const PamResourceHeader = ({ resourceType, onBack }: Props) => {
|
||||
{onBack && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-auto mt-1 text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
|
||||
className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
|
||||
onClick={onBack}
|
||||
>
|
||||
Select another resource type
|
||||
|
||||
@@ -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 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
|
||||
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
|
||||
<span>
|
||||
<HighlightText text={resourceTypeName} highlight={search} />
|
||||
</span>
|
||||
|
||||
@@ -185,7 +185,7 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => {
|
||||
<FontAwesomeIcon icon={faFilter} />
|
||||
</IconButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
|
||||
<DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
|
||||
<DropdownMenuLabel>Resource Type</DropdownMenuLabel>
|
||||
{resources.length ? (
|
||||
[...new Set(resources.map(({ resourceType }) => resourceType))].map((type) => {
|
||||
|
||||
@@ -95,7 +95,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
|
||||
placeholder="Search options..."
|
||||
className="bg-mineshaft-800 placeholder:text-mineshaft-400"
|
||||
/>
|
||||
<div className="grid h-[29.5rem] 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) => {
|
||||
const { image, name, size = 50 } = PAM_RESOURCE_TYPE_MAP[option.resource];
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ type Props = {
|
||||
|
||||
const DetailItem = ({ label, children }: { label: string; children: React.ReactNode }) => (
|
||||
<div className="mb-4">
|
||||
<p className="font-semibold">{label}</p>
|
||||
<p className="font-medium">{label}</p>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@@ -44,7 +44,7 @@ export const PamSessionDetailsSection = ({
|
||||
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-semibold text-mineshaft-100">Session Details</h3>
|
||||
<h3 className="text-lg font-medium text-mineshaft-100">Session Details</h3>
|
||||
</div>
|
||||
<div className="pt-4 text-sm text-mineshaft-300">
|
||||
<DetailItem label="Session ID">
|
||||
@@ -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 whitespace-nowrap bg-yellow/20 text-yellow">
|
||||
<Badge className="flex h-5 w-min items-center gap-1.5 bg-yellow/20 whitespace-nowrap text-yellow">
|
||||
<FontAwesomeIcon icon={faBoxOpen} />
|
||||
{resourceName}
|
||||
</Badge>
|
||||
|
||||
@@ -26,7 +26,7 @@ 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-semibold text-mineshaft-100">Session Logs</h3>
|
||||
<h3 className="text-lg font-medium text-mineshaft-100">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:outline-none focus:ring-2 focus:ring-mineshaft-400 ${
|
||||
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 ${
|
||||
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 select-none items-center gap-2">
|
||||
<div className="flex items-center gap-2 select-none">
|
||||
<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 ? "whitespace-pre-wrap break-all" : "truncate"
|
||||
isExpanded ? "break-all whitespace-pre-wrap" : "truncate"
|
||||
}`}
|
||||
>
|
||||
{log.input}
|
||||
</div>
|
||||
|
||||
{isExpanded && log.output && (
|
||||
<div className="mt-2 whitespace-pre-wrap break-all border-t border-mineshaft-700 pt-2 font-mono text-bunker-300">
|
||||
<div className="mt-2 border-t border-mineshaft-700 pt-2 font-mono break-all whitespace-pre-wrap text-bunker-300">
|
||||
{log.output}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -249,7 +249,7 @@ export const PamSessionsTable = ({ sessions }: Props) => {
|
||||
<FontAwesomeIcon icon={faFilter} />
|
||||
</IconButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
|
||||
<DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
|
||||
<DropdownMenuLabel>Session Status</DropdownMenuLabel>
|
||||
{sessions.length ? (
|
||||
[...new Set(sessions.map(({ status }) => status))].map((status) => {
|
||||
|
||||
Reference in New Issue
Block a user