Skip to content

[dev] [Marfuen] mariano/more-ui-pages #2064

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
github-actions wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[dev] [Marfuen] mariano/more-ui-pages #2064

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorDetailTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
'use client';

import { Comments } from '@/components/comments/Comments';
import { VendorRiskAssessmentView } from '@/components/vendor-risk-assessment/VendorRiskAssessmentView';
import { CommentEntityType } from '@db';
import type { Member, User, Vendor } from '@db';
import type { Prisma } from '@prisma/client';
import {
Expand All @@ -16,6 +18,7 @@ import {
import { useState } from 'react';
import { VendorActions } from './VendorActions';
import { VendorPageClient } from './VendorPageClient';
import { TaskItems } from '@/components/task-items/TaskItems';

// Vendor with risk assessment data merged from GlobalVendors
type VendorWithRiskAssessment = Vendor & {
Expand Down Expand Up @@ -73,6 +76,8 @@ export function VendorDetailTabs({
<TabsList variant="underline">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="risk-assessment">Risk Assessment</TabsTrigger>
<TabsTrigger value="tasks">Tasks</TabsTrigger>
<TabsTrigger value="comments">Comments</TabsTrigger>
</TabsList>
)
}
Expand All @@ -90,7 +95,6 @@ export function VendorDetailTabs({
onEditSheetOpenChange={setIsEditSheetOpen}
/>
</TabsContent>

<TabsContent value="risk-assessment">
<Stack gap="md">
{riskAssessmentData ? (
Expand All @@ -115,6 +119,16 @@ export function VendorDetailTabs({
)}
</Stack>
</TabsContent>
{!isViewingTask && (
<TabsContent value="tasks">
<TaskItems entityId={vendorId} entityType="vendor" organizationId={orgId} />
</TabsContent>
)}
Copy link

@cursor cursor bot Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TaskItems no longer visible when viewing a task

Medium Severity

The TaskItems component was previously rendered unconditionally on the vendor detail page, making tasks always visible. After this change, TaskItems is wrapped in {!isViewingTask && (...)}, so when isViewingTask is true, the tasks list is no longer accessible. This behavioral regression removes functionality users may rely on when viewing a task in context.

Additional Locations (1)

Fix in Cursor Fix in Web

{!isViewingTask && (
<TabsContent value="comments">
<Comments entityId={vendorId} entityType={CommentEntityType.vendor} organizationId={orgId} />
</TabsContent>
)}
</PageLayout>
</Tabs>
);
Expand Down
88 changes: 42 additions & 46 deletions apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,55 +93,51 @@ export function VendorHeader({ vendor, isEditSheetOpen, onEditSheetOpenChange }:

return (
<>
<div className="mb-4 space-y-1">
<div className="flex flex-wrap items-center gap-2">
<h1 className="text-lg font-semibold text-foreground">{vendor.name}</h1>
{certifications.filter((cert) => cert.status === 'verified').length > 0 && (
<div className="flex flex-wrap items-center gap-2">
{certifications
.filter((cert) => {
// Only show verified certifications
return cert.status === 'verified';
})
.map((cert, index) => {
const IconComponent = getCertificationIcon(cert);

if (!IconComponent) return null;

const iconContent = (
<div
className={cn(
'inline-flex items-center justify-center',
'transition-all duration-300 ease-out',
'w-[24px] h-[28px] shrink-0 overflow-hidden', // Proportionally smaller
cert.url && ['cursor-pointer', 'hover:scale-[1.02]', 'active:scale-[0.99]'],
)}
title={cert.type} // Show full text on hover
<div className="mb-4 space-y-2">
{certifications.filter((cert) => cert.status === 'verified').length > 0 && (
<div className="flex flex-wrap items-center gap-2">
{certifications
.filter((cert) => {
// Only show verified certifications
return cert.status === 'verified';
})
.map((cert, index) => {
const IconComponent = getCertificationIcon(cert);

if (!IconComponent) return null;

const iconContent = (
<div
className={cn(
'inline-flex items-center justify-center',
'transition-all duration-300 ease-out',
'w-[24px] h-[28px] shrink-0 overflow-hidden', // Proportionally smaller
cert.url && ['cursor-pointer', 'hover:scale-[1.02]', 'active:scale-[0.99]'],
)}
title={cert.type} // Show full text on hover
>
<IconComponent className="h-[24px] w-[24px] max-h-[24px] max-w-[24px]" />
</div>
);

if (cert.url) {
return (
<Link
key={`${cert.type}-${index}`}
href={cert.url}
target="_blank"
rel="noopener noreferrer"
className="inline-block"
>
<IconComponent className="h-[24px] w-[24px] max-h-[24px] max-w-[24px]" />
</div>
{iconContent}
</Link>
);
}

if (cert.url) {
return (
<Link
key={`${cert.type}-${index}`}
href={cert.url}
target="_blank"
rel="noopener noreferrer"
className="inline-block"
>
{iconContent}
</Link>
);
}

return <div key={`${cert.type}-${index}`}>{iconContent}</div>;
})}
</div>
)}
</div>
{vendor.description && <p className="text-sm text-muted-foreground">{vendor.description}</p>}
return <div key={`${cert.type}-${index}`}>{iconContent}</div>;
})}
</div>
)}
Copy link

@cursor cursor bot Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vendor description removed from display

Medium Severity

The vendor.description text was removed from VendorHeader and is no longer displayed anywhere on the vendor detail page. While a TitleAndDescription component exists that could display it, it's not being used. Users can only access the description through the edit sheet (UpdateTitleAndDescriptionSheet), but there's no read-only view of this information anymore.

Fix in Cursor Fix in Web

{links.length > 0 && (
<div className="flex flex-wrap items-center gap-2 pt-2">
{links.map((link, index) => {
Expand Down
7 changes: 0 additions & 7 deletions apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorPageClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
'use client';

import { Comments } from '@/components/comments/Comments';
import { TaskItems } from '@/components/task-items/TaskItems';
import { useVendor, type VendorResponse } from '@/hooks/use-vendors';
import { CommentEntityType } from '@db';
import type { Member, User, Vendor } from '@db';
import type { Prisma } from '@prisma/client';
import { useMemo } from 'react';
Expand Down Expand Up @@ -102,10 +99,6 @@ export function VendorPageClient({
</div>
</>
)}
<TaskItems entityId={vendorId} entityType="vendor" organizationId={orgId} />
{!isViewingTask && (
<Comments entityId={vendorId} entityType={CommentEntityType.vendor} organizationId={orgId} />
)}
</div>
</>
);
Expand Down
10 changes: 4 additions & 6 deletions ...src/app/(app)/[orgId]/vendors/[vendorId]/components/secondary-fields/secondary-fields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';

import { Card, CardContent } from '@comp/ui/card';
import type { Member, User, Vendor } from '@db';
import { Section } from '@trycompai/design-system';
import { UpdateSecondaryFieldsForm } from './update-secondary-fields-form';

export function SecondaryFields({
Expand All @@ -12,10 +12,8 @@ export function SecondaryFields({
assignees: (Member & { user: User })[];
}) {
return (
<Card>
<CardContent className="space-y-4 pt-6">
<UpdateSecondaryFieldsForm vendor={vendor} assignees={assignees} />
</CardContent>
</Card>
<Section>
<UpdateSecondaryFieldsForm vendor={vendor} assignees={assignees} />
</Section>
);
}
32 changes: 16 additions & 16 deletions apps/app/src/components/comments/CommentRichTextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
'use client';

import { createMentionExtension, type MentionUser } from '@comp/ui/editor';
import { defaultExtensions } from '@comp/ui/editor/extensions';
import type { JSONContent } from '@tiptap/react';
import { useEditor, EditorContent } from '@tiptap/react';
import { useMemo, useEffect, useCallback } from 'react';
import { EditorContent, useEditor } from '@tiptap/react';
import type { CSSProperties } from 'react';
import { useCallback, useEffect, useMemo } from 'react';
import { useDebouncedCallback } from 'use-debounce';

type EditorSizeStyle = CSSProperties & {
'--editor-min-height': string;
'--editor-height': string;
};
import { createMentionExtension, type MentionUser } from '@comp/ui/editor';
import { useDebouncedCallback } from 'use-debounce';
import { defaultExtensions } from '@comp/ui/editor/extensions';

interface CommentRichTextFieldProps {
value: JSONContent | null;
Expand All @@ -30,19 +30,16 @@ export function CommentRichTextField({
placeholder = 'Leave a comment... Mention users with @',
onMentionSelect,
}: CommentRichTextFieldProps) {
const editorSizeStyles: EditorSizeStyle = useMemo(
() => ({
'--editor-min-height': '120px',
'--editor-height': 'auto',
}),
[],
);
const editorSizeStyles: EditorSizeStyle = {
'--editor-min-height': '80px',
'--editor-height': 'auto',
};

// Search members for mention suggestions - use the members prop directly
const searchMembers = useCallback(
(query: string): MentionUser[] => {
if (!members || members.length === 0) return [];

// Show first 20 members immediately when query is empty
if (!query || query.trim() === '') {
return members.slice(0, 20);
Expand Down Expand Up @@ -108,7 +105,8 @@ export function CommentRichTextField({
editorProps: {
attributes: {
class:
'comment-editor prose-sm max-w-none focus:outline-none px-3 py-2 text-sm [&_p]:m-0 [&_p]:p-0 [&_p]:text-sm [&_p]:leading-normal',
'comment-editor prose-sm max-w-none focus:outline-none p-6 text-sm [&_p]:m-0 [&_p]:p-0 [&_p]:text-sm [&_p]:leading-normal',
style: 'min-height: var(--editor-min-height, 240px);',
},
},
},
Expand All @@ -131,9 +129,11 @@ export function CommentRichTextField({
}, [value, editor]);

return (
<div className="rounded-md bg-background [&_.ProseMirror_p.is-empty::before]:text-muted-foreground/50" style={editorSizeStyles}>
<div
className="rounded-md bg-background [&_.ProseMirror_p.is-empty::before]:text-muted-foreground/50"
style={editorSizeStyles}
>
<EditorContent editor={editor} />
</div>
);
}

20 changes: 11 additions & 9 deletions apps/app/src/components/risks/charts/RiskMatrixChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@ const getRiskColor = (level: string) => {
};

const probabilityLevels = ['Very Likely', 'Likely', 'Possible', 'Unlikely', 'Very Unlikely'];
const probabilityNumbers = ['5', '4', '3', '2', '1'];
Copy link

@cursor cursor bot Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused constant probabilityLabels left as dead code

Low Severity

The probabilityLabels array constant is defined but never used. The diff shows that the row label element previously had title={probabilityLabels[rowIdx]} for tooltip functionality, but this was removed during the refactoring. The constant definition was left behind, creating dead code that clutters the codebase and may confuse future developers.

Fix in Cursor Fix in Web

Copy link

@cursor cursor bot Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused constant impactNumbers is dead code

Low Severity

The impactNumbers array constant is defined but never used anywhere in the component or codebase. While cleaning up probabilityNumbers (which was removed in this PR), this related unused constant was overlooked. It represents dead code that adds unnecessary clutter.

Fix in Cursor Fix in Web

const probabilityLabels = [
'Very Likely (5)',
'Likely (4)',
Expand Down Expand Up @@ -183,7 +182,10 @@ export function RiskMatrixChart({
</div>
</CardHeader>
<CardContent>
<div className="relative">
<div className="relative pl-10">
<div className="pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 -rotate-90 text-xs text-muted-foreground">
Likelihood
</div>
<div>
<div className="grid grid-cols-6 rounded-lg">
<div className="h-12" />
Expand All @@ -194,11 +196,8 @@ export function RiskMatrixChart({
))}
{probabilityLevels.map((probability, rowIdx) => (
<div key={probability} className="contents">
<div
className="mr-4 flex flex-col items-center justify-center"
title={probabilityLabels[rowIdx]}
>
<span className="text-xs">{probabilityNumbers[rowIdx]}</span>
<div className="mr-4 flex flex-col items-end justify-center text-right">
<span className="text-xs">{probabilityLevels[rowIdx]}</span>
</div>
{impactLevels.map((impact, colIdx) => {
const cell = riskData.find(
Expand Down Expand Up @@ -230,8 +229,11 @@ export function RiskMatrixChart({
</div>
))}
</div>
<div className="mt-2 flex justify-center">
<span className="text-xs">{'Impact'}</span>
<div className="mt-2 grid grid-cols-6">
<div />
<div className="col-span-5 flex justify-center">
<span className="text-xs">Impact</span>
</div>
</div>
</div>
</div>
Expand Down