feat: upgraded to tw v4

This commit is contained in:
=
2025-10-09 22:37:42 +05:30
parent 2da35b389d
commit 7b0a51f5cf
669 changed files with 2856 additions and 3143 deletions
@@ -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}`}
@@ -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) => {