Skip to content

Commit 340ff36

Browse files
github-actions[bot]Marfuen
github-actions[bot]
and
Marfuen
authored
[dev] [Marfuen] mariano/ui-fixes-2 (#2026)
* chore(dependencies): update @trycompai/design-system to versions 1.0.32 and 1.0.36 * chore(dependencies): update @trycompai/design-system to version 1.0.37 * refactor(policies): update PdfViewer and PolicyOverviewSheet components with new design system * refactor(ui): update toast messages and badge styles for consistency * refactor(ui): update theme handling and improve component styles * refactor(ui): enhance AvatarFallback styles for improved visibility * refactor(ui): update metrics calculation and improve badge styles * refactor(ui): update task list components with new design system styles * refactor(ui): update GrantsTab and RequestsTab components with new design system styles * refactor(ui): simplify pagination implementation in RisksTable and VendorsTable components * refactor(ui): stop event propagation on delete click in RisksTable and VendorsTable * refactor(ui): update vendor risk and task components with new design system styles * refactor(ui): integrate new design system components in vendor actions and details * refactor(ui): replace input components with new design system styles in QuestionnaireResultsHeader and QuestionnaireHistory * refactor(ui): update search input in QuestionnaireHistory with new design system styles * refactor(ui): integrate new design system components in TestsLayout * refactor(ui): enhance pagination logic and reset page on search change in VendorsTable * refactor(ui): replace button elements with new design system Button component in forms --------- Co-authored-by: Mariano Fuentes <marfuen98@gmail.com>
1 parent 42ac58f commit 340ff36

62 files changed

Lines changed: 1428 additions & 1252 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"@trigger.dev/react-hooks": "4.0.6",
5858
"@trigger.dev/sdk": "4.0.6",
5959
"@trycompai/db": "1.3.21",
60-
"@trycompai/design-system": "^1.0.28",
60+
"@trycompai/design-system": "^1.0.32",
6161
"@trycompai/email": "workspace:*",
6262
"@types/canvas-confetti": "^1.9.0",
6363
"@types/react-syntax-highlighter": "^15.5.13",

‎apps/app/src/app/(app)/[orgId]/cloud-tests/components/TestsLayout.tsx‎

Lines changed: 49 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@
33
import { ManageIntegrationDialog } from '@/components/integrations/ManageIntegrationDialog';
44
import { useIntegrationMutations } from '@/hooks/use-integration-platform';
55
import { api } from '@/lib/api-client';
6-
import { Button } from '@comp/ui/button';
7-
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@comp/ui/tabs';
8-
import { Plus, Settings } from 'lucide-react';
6+
import { Button, PageHeader, PageHeaderDescription, PageLayout, Tabs, TabsContent, TabsList, TabsTrigger } from '@trycompai/design-system';
7+
import { Add, Settings } from '@trycompai/design-system/icons';
98
import { useState } from 'react';
109
import { toast } from 'sonner';
1110
import useSWR from 'swr';
@@ -188,33 +187,30 @@ export function TestsLayout({ initialFindings, initialProviders, orgId }: TestsL
188187
const provider = connectedProviders[0];
189188
const providerFindings = findingsByProvider[provider.integrationId] ?? [];
190189

190+
const description = provider.lastRunAt
191+
? `${provider.name} • ${providerFindings.length} findings • Last scan: ${new Date(provider.lastRunAt).toLocaleString()}`
192+
: `${provider.name} • ${providerFindings.length} findings`;
193+
191194
return (
192-
<div className="mx-auto max-w-7xl flex w-full flex-col gap-6 py-4 md:py-6 lg:py-8">
193-
<div className="flex items-center justify-between">
194-
<div className="space-y-1">
195-
<h1 className="text-2xl font-semibold tracking-tight">Cloud Security Tests</h1>
196-
<p className="text-muted-foreground text-sm">
197-
{provider.name} • {providerFindings.length} findings
198-
</p>
199-
{provider.lastRunAt && (
200-
<p className="text-muted-foreground text-xs">
201-
Last scan: {new Date(provider.lastRunAt).toLocaleString()} • Next scan: Daily at
202-
5:00 AM UTC
203-
</p>
204-
)}
205-
</div>
206-
<div className="flex items-center gap-3">
207-
{connectedProviders.length < SUPPORTED_PROVIDER_IDS.length && (
208-
<Button variant="outline" size="sm" onClick={() => setViewingResults(false)}>
209-
<Plus className="mr-2 h-4 w-4" />
210-
Add Cloud
195+
<PageLayout>
196+
<PageHeader
197+
title="Cloud Security Tests"
198+
actions={
199+
<>
200+
{connectedProviders.length < SUPPORTED_PROVIDER_IDS.length && (
201+
<Button variant="outline" size="sm" onClick={() => setViewingResults(false)}>
202+
<Add />
203+
Add Cloud
204+
</Button>
205+
)}
206+
<Button variant="outline" size="icon" onClick={() => setShowSettings(true)}>
207+
<Settings />
211208
</Button>
212-
)}
213-
<Button variant="outline" size="icon" onClick={() => setShowSettings(true)}>
214-
<Settings className="h-4 w-4" />
215-
</Button>
216-
</div>
217-
</div>
209+
</>
210+
}
211+
>
212+
<PageHeaderDescription>{description}</PageHeaderDescription>
213+
</PageHeader>
218214

219215
<ResultsView
220216
findings={providerFindings}
@@ -267,38 +263,36 @@ export function TestsLayout({ initialFindings, initialProviders, orgId }: TestsL
267263
}}
268264
/>
269265
)}
270-
</div>
266+
</PageLayout>
271267
);
272268
}
273269

274270
const defaultTab = connectedProviders[0]?.integrationId ?? 'aws';
275271

272+
const multiProviderDescription = connectedProviders.some((p) => p.lastRunAt)
273+
? `${connectedProviders.length} cloud providers connected • Automated scans run daily at 5:00 AM UTC`
274+
: `${connectedProviders.length} cloud providers connected`;
275+
276276
return (
277-
<div className="container mx-auto flex w-full flex-col gap-6 p-4 md:p-6 lg:p-8">
278-
<div className="flex items-center justify-between">
279-
<div className="space-y-1">
280-
<h1 className="text-2xl font-semibold tracking-tight">Cloud Security Tests</h1>
281-
<p className="text-muted-foreground text-sm">
282-
{connectedProviders.length} cloud providers connected
283-
</p>
284-
{connectedProviders.some((p) => p.lastRunAt) && (
285-
<p className="text-muted-foreground text-xs">
286-
Automated scans run daily at 5:00 AM UTC
287-
</p>
288-
)}
289-
</div>
290-
<div className="flex items-center gap-3">
291-
{connectedProviders.length < SUPPORTED_PROVIDER_IDS.length && (
292-
<Button variant="outline" size="sm" onClick={() => setViewingResults(false)}>
293-
<Plus className="mr-2 h-4 w-4" />
294-
Add Cloud
277+
<PageLayout>
278+
<PageHeader
279+
title="Cloud Security Tests"
280+
actions={
281+
<>
282+
{connectedProviders.length < SUPPORTED_PROVIDER_IDS.length && (
283+
<Button variant="outline" size="sm" onClick={() => setViewingResults(false)}>
284+
<Add />
285+
Add Cloud
286+
</Button>
287+
)}
288+
<Button variant="outline" size="icon" onClick={() => setShowSettings(true)}>
289+
<Settings />
295290
</Button>
296-
)}
297-
<Button variant="outline" size="icon" onClick={() => setShowSettings(true)}>
298-
<Settings className="h-4 w-4" />
299-
</Button>
300-
</div>
301-
</div>
291+
</>
292+
}
293+
>
294+
<PageHeaderDescription>{multiProviderDescription}</PageHeaderDescription>
295+
</PageHeader>
302296

303297
<Tabs defaultValue={defaultTab} onValueChange={setActiveTab}>
304298
<TabsList>
@@ -313,11 +307,7 @@ export function TestsLayout({ initialFindings, initialProviders, orgId }: TestsL
313307
const providerFindings = findingsByProvider[provider.integrationId] ?? [];
314308

315309
return (
316-
<TabsContent
317-
key={provider.integrationId}
318-
value={provider.integrationId}
319-
className="mt-6"
320-
>
310+
<TabsContent key={provider.integrationId} value={provider.integrationId}>
321311
<ResultsView
322312
findings={providerFindings}
323313
onRunScan={() => handleRunScan(provider.integrationId)}
@@ -373,6 +363,6 @@ export function TestsLayout({ initialFindings, initialProviders, orgId }: TestsL
373363
}}
374364
/>
375365
)}
376-
</div>
366+
</PageLayout>
377367
);
378368
}

‎apps/app/src/app/(app)/[orgId]/components/AppShellWrapper.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { NotificationBell } from '@/components/notifications/notification-bell';
66
import { OrganizationSwitcher } from '@/components/organization-switcher';
77
import { updateSidebarState } from '@/actions/sidebar';
88
import { SidebarProvider, useSidebar } from '@/context/sidebar-context';
9-
import { signOut } from '@/utils/auth-client';
9+
import { authClient } from '@/utils/auth-client';
1010
import {
1111
CertificateCheck,
1212
Logout,
@@ -83,14 +83,15 @@ function AppShellWrapperContent({
8383
children,
8484
organization,
8585
organizations,
86+
logoUrls,
8687
onboarding,
8788
isQuestionnaireEnabled,
8889
isTrustNdaEnabled,
8990
hasAuditorRole,
9091
isOnlyAuditor,
9192
user,
9293
}: AppShellWrapperContentProps) {
93-
const { theme, setTheme } = useTheme();
94+
const { resolvedTheme, setTheme } = useTheme();
9495
const pathname = usePathname();
9596
const router = useRouter();
9697
const { isCollapsed, setIsCollapsed } = useSidebar();
@@ -136,11 +137,11 @@ function AppShellWrapperContent({
136137
<Link href="/">
137138
<Logo
138139
style={{ height: 22, width: 'auto' }}
139-
variant={theme === 'dark' ? 'light' : 'dark'}
140+
variant={resolvedTheme === 'dark' ? 'light' : 'dark'}
140141
/>
141142
</Link>
142143
<span className="pl-3 pr-1 text-muted-foreground">/</span>
143-
<OrganizationSwitcher organizations={organizations} organization={organization} />
144+
<OrganizationSwitcher organizations={organizations} organization={organization} logoUrls={logoUrls} />
144145
</HStack>
145146
}
146147
centerContent={<CommandSearch groups={searchGroups} placeholder="Search..." />}
@@ -180,12 +181,22 @@ function AppShellWrapperContent({
180181
<Text size="sm">Theme</Text>
181182
<ThemeToggle
182183
size="sm"
183-
isDark={theme === 'dark'}
184+
isDark={resolvedTheme === 'dark'}
184185
onChange={(isDark) => setTheme(isDark ? 'dark' : 'light')}
185186
/>
186187
</div>
187188
<DropdownMenuSeparator />
188-
<DropdownMenuItem onClick={() => signOut()}>
189+
<DropdownMenuItem
190+
onClick={async () => {
191+
await authClient.signOut({
192+
fetchOptions: {
193+
onSuccess: () => {
194+
router.push('/auth');
195+
},
196+
},
197+
});
198+
}}
199+
>
189200
<Logout size={16} />
190201
Log out
191202
</DropdownMenuItem>

0 commit comments

Comments
 (0)