bugfix: copy/regenerate link for invitation action added to connection request lis in orgs feature.

This commit is contained in:
2026-05-17 13:13:59 +03:30
parent 09b511a136
commit 046257c071
14 changed files with 384 additions and 171 deletions

View File

@@ -1,7 +1,7 @@
'use client';
'use client';
import { useEffect, useState } from 'react';
import { Check, Link2, Trash2, X } from 'lucide-react';
import { Check, Trash2, UserPlus, X } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { useOrganizationInviteLinkCopy } from '@/lib/hooks/useOrganizationInviteLinkCopy';
import {
@@ -10,9 +10,11 @@ import {
type CounterpartSearchResultDto,
type OrganizationInvitationHistoryItemDto,
} from '@/lib/api/organization';
import { invitationTargetFromConnectionRow } from '@/components/invitations/organizationInviteLinks';
import { CopyInvitationLinkButton } from '@/components/ui/organizations/CopyInvitationLinkButton';
import { InvitationHistoryDialog } from '@/components/ui/organizations/InvitationHistoryDialog';
import { Button } from '@/components/ui/common/Button';
import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
import { Badge, organizationConnectionStatusVariant } from '@/components/ui/common/Badge';
import { Input } from '@/components/ui/common/Input';
import { SearchBar } from '@/components/ui/common/SearchBar';
import { Table } from '@/components/ui/common/Table';
@@ -24,11 +26,22 @@ function formatOrganizationStatusLabel(status: string): string {
return lower.charAt(0).toUpperCase() + lower.slice(1);
}
function formatLinkStatusLabel(status: CounterpartItemDto['status']): string {
if (status === 'PENDING') return 'Link request pending';
if (status === 'ACTIVE') return 'Linked';
if (status === 'REJECTED') return 'Link request rejected';
return formatOrganizationStatusLabel(status);
function formatConnectionStatusLabel(
row: CounterpartItemDto,
currentOrganizationId: string,
): string {
if (row.status === 'PENDING') {
if (
row.pendingInvitationId &&
row.requestedByOrganizationId === currentOrganizationId
) {
return 'Invitation pending';
}
return 'Connection request pending';
}
if (row.status === 'ACTIVE') return 'Connected';
if (row.status === 'REJECTED') return 'Connection request declined';
return formatOrganizationStatusLabel(row.status);
}
function formatApiMessage(err: unknown): string {
@@ -41,7 +54,7 @@ function formatApiMessage(err: unknown): string {
function formatTableDate(value: string): string {
const d = new Date(value);
if (Number.isNaN(d.getTime())) return '—';
if (Number.isNaN(d.getTime())) return '\u2014';
return d.toLocaleDateString();
}
@@ -57,8 +70,8 @@ export default function OrganizationsPage() {
const [mode, setMode] = useState<TableMode>('existing');
const [searching, setSearching] = useState(false);
const [searchResults, setSearchResults] = useState<CounterpartSearchResultDto[]>([]);
const [requestLinkRowId, setRequestLinkRowId] = useState<string | null>(null);
const [deleteLinkRowId, setDeleteLinkRowId] = useState<string | null>(null);
const [pendingConnectionRowId, setPendingConnectionRowId] = useState<string | null>(null);
const [deleteConnectionRowId, setDeleteConnectionRowId] = useState<string | null>(null);
const [items, setItems] = useState<CounterpartItemDto[]>([]);
const [manualOrganizationName, setManualOrganizationName] = useState('');
@@ -131,12 +144,12 @@ export default function OrganizationsPage() {
}
}
async function submitRequestLink(targetOrganizationId: string) {
setRequestLinkRowId(targetOrganizationId);
async function submitConnectionRequest(targetOrganizationId: string) {
setPendingConnectionRowId(targetOrganizationId);
setError('');
try {
await organizationApi.createLink(targetOrganizationId);
setSuccess(`${counterpartLabel} link request sent`);
await organizationApi.createConnectionRequest(targetOrganizationId);
setSuccess(`${counterpartLabel} connection request sent.`);
setSearchResults([]);
setQuery('');
setMode('existing');
@@ -144,7 +157,7 @@ export default function OrganizationsPage() {
} catch (e) {
setError(formatApiMessage(e));
} finally {
setRequestLinkRowId(null);
setPendingConnectionRowId(null);
}
}
@@ -210,31 +223,60 @@ export default function OrganizationsPage() {
}
}
async function respondToPendingLink(linkId: string, action: 'ACCEPT' | 'REJECT') {
setRequestLinkRowId(linkId);
async function handleCopyInvitationFromRow(row: CounterpartItemDto) {
const target = invitationTargetFromConnectionRow(row, currentOrganization!.id);
if (!target) return;
setError('');
try {
await organizationApi.respondLink(linkId, action);
setSuccess(action === 'ACCEPT' ? 'Link request accepted' : 'Link request rejected');
await loadList();
await copyInvitationLink(
{
id: target.id,
organizationName: row.organizationName,
ownerEmail: target.ownerEmail,
status: target.status,
createdAt: row.createdAt,
acceptedAt: target.acceptedAt,
},
{
onRegenerated: async () => {
await loadList();
},
},
);
setSuccess('Invitation link copied to clipboard.');
setTimeout(() => setSuccess(''), 3000);
} catch (e) {
setError(formatApiMessage(e));
} finally {
setRequestLinkRowId(null);
}
}
async function deleteLinkedOrganization(linkId: string) {
setDeleteLinkRowId(linkId);
async function respondToPendingConnection(connectionId: string, action: 'ACCEPT' | 'REJECT') {
setPendingConnectionRowId(connectionId);
setError('');
try {
await organizationApi.deleteLink(linkId);
setSuccess('Linked organization removed');
await organizationApi.respondToConnectionRequest(connectionId, action);
setSuccess(
action === 'ACCEPT' ? 'Connection request accepted.' : 'Connection request declined.',
);
await loadList();
} catch (e) {
setError(formatApiMessage(e));
} finally {
setDeleteLinkRowId(null);
setPendingConnectionRowId(null);
}
}
async function deleteConnection(connectionId: string) {
setDeleteConnectionRowId(connectionId);
setError('');
try {
await organizationApi.deleteConnection(connectionId);
setSuccess('Connection removed.');
await loadList();
} catch (e) {
setError(formatApiMessage(e));
} finally {
setDeleteConnectionRowId(null);
}
}
@@ -255,7 +297,8 @@ export default function OrganizationsPage() {
<div>
<h1 className="text-2xl font-semibold text-text-primary">{tabLabel}</h1>
<p className="text-sm text-text-secondary mt-1">
Search organizations and send link requests or invitation links in one place.
Search organizations, send connection requests to existing accounts, or invitation
links when they are not on DyoLink yet.
</p>
</div>
<Button type="button" size="sm" onClick={() => void openInvitationHistory()}>
@@ -334,7 +377,7 @@ export default function OrganizationsPage() {
existingRows.length === 0 ? (
<tr>
<td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
No organizations linked or pending yet. Use search to find and connect.
No connections yet. Search to send a connection request or an invitation link.
</td>
</tr>
) : (
@@ -343,6 +386,10 @@ export default function OrganizationsPage() {
row.status === 'PENDING' &&
row.requestedByOrganizationId !== null &&
row.requestedByOrganizationId !== currentOrganization.id;
const invitationTarget = invitationTargetFromConnectionRow(
row,
currentOrganization.id,
);
return (
<tr key={row.id} className="hover:bg-background-secondary/45">
@@ -354,31 +401,39 @@ export default function OrganizationsPage() {
{formatTableDate(row.createdAt)}
</td>
<td className="px-6 py-1.5 text-center align-middle">
<Badge variant={organizationLinkStatusVariant(row.status)} fixedWidth={false}>
{formatLinkStatusLabel(row.status)}
<Badge variant={organizationConnectionStatusVariant(row.status)} fixedWidth={false}>
{formatConnectionStatusLabel(row, currentOrganization.id)}
</Badge>
</td>
<td className="px-6 py-1.5 text-right">
<div className="inline-flex items-center gap-2">
{invitationTarget && (
<CopyInvitationLinkButton
invitation={invitationTarget}
copied={copiedId === invitationTarget.id}
copying={copyingInvitationId === invitationTarget.id}
onCopy={() => void handleCopyInvitationFromRow(row)}
/>
)}
{canRespond && (
<>
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:text-text-muted disabled:opacity-50"
disabled={requestLinkRowId !== null && requestLinkRowId !== row.id}
onClick={() => void respondToPendingLink(row.id, 'ACCEPT')}
aria-label="Accept link request"
title="Accept link request"
disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
onClick={() => void respondToPendingConnection(row.id, 'ACCEPT')}
aria-label="Accept connection request"
title="Accept connection request"
>
<Check className="w-4 h-4" />
</button>
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
disabled={requestLinkRowId !== null && requestLinkRowId !== row.id}
onClick={() => void respondToPendingLink(row.id, 'REJECT')}
aria-label="Reject link request"
title="Reject link request"
disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
onClick={() => void respondToPendingConnection(row.id, 'REJECT')}
aria-label="Decline connection request"
title="Decline connection request"
>
<X className="w-4 h-4" />
</button>
@@ -388,10 +443,10 @@ export default function OrganizationsPage() {
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
disabled={deleteLinkRowId !== null && deleteLinkRowId !== row.id}
onClick={() => void deleteLinkedOrganization(row.id)}
aria-label="Delete link"
title="Delete link"
disabled={deleteConnectionRowId !== null && deleteConnectionRowId !== row.id}
onClick={() => void deleteConnection(row.id)}
aria-label="Remove connection"
title="Remove connection"
>
<Trash2 className="w-4 h-4" />
</button>
@@ -415,12 +470,14 @@ export default function OrganizationsPage() {
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:text-text-muted disabled:opacity-50"
disabled={requestLinkRowId !== null && requestLinkRowId !== r.id}
onClick={() => void submitRequestLink(r.id)}
aria-label="Send link request"
title="Send link request"
disabled={
pendingConnectionRowId !== null && pendingConnectionRowId !== r.id
}
onClick={() => void submitConnectionRequest(r.id)}
aria-label="Send connection request"
title="Send connection request"
>
<Link2 className="w-4 h-4" />
<UserPlus className="w-4 h-4" />
</button>
</td>
</tr>