admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source
This commit is contained in:
Admin
2026-05-17 13:13:59 +03:30
parent 09b511a136
commit 046257c071
14 changed files with 384 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
frontend/src/app/(dashboard)/organizations/page.tsx
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>

29
frontend/src/components/invitations/organizationInviteLinks.ts
View File

@@ -1,5 +1,14 @@
import type { OrganizationInvitationHistoryItemDto } from '@/lib/api/organization';
import type {
CounterpartItemDto,
OrganizationInvitationHistoryItemDto,
} from '@/lib/api/organization';
export type InvitationLinkTarget = Pick<
OrganizationInvitationHistoryItemDto,
'id' | 'ownerEmail' | 'status' | 'acceptedAt'
>;
/** Cached after POST /organizations/invite because only tokenHash is persisted server-side. */
export type StoredOrganizationInviteLink = {
invitationId: string;
ownerEmail: string;
@@ -39,3 +48,21 @@ export function canShareOrganizationInviteLink(
if (invitation.acceptedAt) return false;
return invitation.status === 'PENDING' || invitation.status === 'EXPIRED';
}
/**
* Maps a connections-list row to copy/regenerate UI when it was created by the invitation flow.
* Plain invite URLs are not stored in the DB; use localStorage (storeInviteLink) or POST …/link.
*/
export function invitationTargetFromConnectionRow(
row: CounterpartItemDto,
currentOrganizationId: string,
): InvitationLinkTarget | null {
if (!row.pendingInvitationId) return null;
if (row.requestedByOrganizationId !== currentOrganizationId) return null;
return {
id: row.pendingInvitationId,
ownerEmail: row.ownerEmail,
status: row.invitationStatus ?? 'PENDING',
acceptedAt: null,
};
}

4
frontend/src/components/ui/common/Badge.tsx
View File

@@ -43,8 +43,8 @@ export function Badge({
);
}
/** Map organization link / invitation row status to badge variant. */
export function organizationLinkStatusVariant(status: string): BadgeVariant {
/** Map organization connection / invitation row status to badge variant. */
export function organizationConnectionStatusVariant(status: string): BadgeVariant {
switch (status) {
case 'ACTIVE':
return 'success';

38
frontend/src/components/ui/organizations/CopyInvitationLinkButton.tsx Normal file
View File

@@ -0,0 +1,38 @@
'use client';
import { Check, Copy } from 'lucide-react';
import {
canShareOrganizationInviteLink,
type InvitationLinkTarget,
} from '@/components/invitations/organizationInviteLinks';
type CopyInvitationLinkButtonProps = {
invitation: InvitationLinkTarget;
copied: boolean;
copying: boolean;
onCopy: () => void;
};
export function CopyInvitationLinkButton({
invitation,
copied,
copying,
onCopy,
}: CopyInvitationLinkButtonProps) {
if (!canShareOrganizationInviteLink(invitation)) {
return <span className="text-xs text-text-muted">—</span>;
}
return (
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
disabled={copying}
onClick={onCopy}
aria-label="Copy invitation link"
title="Copy invitation link (generates a new link if needed)"
>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
</button>
);
}

35
frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
View File

@@ -1,15 +1,14 @@
'use client';
import { Check, Copy } from 'lucide-react';
import { DialogCloseButton } from '@/components/ui/common/DialogCloseButton';
import type { OrganizationInvitationHistoryItemDto } from '@/lib/api/organization';
import { canShareOrganizationInviteLink } from '@/components/invitations/organizationInviteLinks';
import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
import { Badge, organizationConnectionStatusVariant } from '@/components/ui/common/Badge';
import { Table } from '@/components/ui/common/Table';
import { CopyInvitationLinkButton } from '@/components/ui/organizations/CopyInvitationLinkButton';
function formatInvitationStatusLabel(status: OrganizationInvitationHistoryItemDto['status']): string {
if (status === 'PENDING') return 'Invitation pending';
if (status === 'ACTIVE') return 'Invitation Accepted';
if (status === 'ACTIVE') return 'Invitation accepted';
if (status === 'REJECTED') return 'Invitation rejected';
if (status === 'EXPIRED') return 'Invitation expired';
return status;
@@ -94,7 +93,7 @@ export function InvitationHistoryDialog({
Status
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider">
Action
Invitation link
</th>
</tr>
}
@@ -108,29 +107,17 @@ export function InvitationHistoryDialog({
{formatTableDate(inv.createdAt)}
</td>
<td className="px-6 py-1.5 text-center align-middle">
<Badge variant={organizationLinkStatusVariant(inv.status)} fixedWidth={false}>
<Badge variant={organizationConnectionStatusVariant(inv.status)} fixedWidth={false}>
{formatInvitationStatusLabel(inv.status)}
</Badge>
</td>
<td className="px-6 py-1.5 text-right align-middle">
{canShareOrganizationInviteLink(inv) ? (
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
disabled={copyingInvitationId === inv.id}
onClick={() => onCopy(inv)}
aria-label="Copy invitation link"
title="Copy invitation link (generates a new link if needed)"
>
{copiedId === inv.id ? (
<Check className="w-4 h-4" />
) : (
<Copy className="w-4 h-4" />
)}
</button>
) : (
<span className="text-xs text-text-muted">—</span>
)}
<CopyInvitationLinkButton
invitation={inv}
copied={copiedId === inv.id}
copying={copyingInvitationId === inv.id}
onCopy={() => onCopy(inv)}
/>
</td>
</tr>
))}

26
frontend/src/lib/api/organization.ts
View File

@@ -18,6 +18,12 @@ export interface CounterpartItemDto {
status: 'PENDING' | 'ACTIVE' | 'REJECTED' | 'EXPIRED';
createdAt: string;
acceptedAt: string | null;
/**
* Set by GET /organizations/connections when this PENDING row came from inviteOrganization()
* (joined server-side). Lets the main table show copy-invite without opening history.
*/
pendingInvitationId?: string | null;
invitationStatus?: OrganizationInvitationHistoryItemDto['status'] | null;
}
export interface OrganizationInvitationHistoryItemDto {
@@ -36,7 +42,7 @@ export const organizationApi = {
},
list: async (): Promise<{ success: boolean; data: { items: CounterpartItemDto[] } }> => {
const response = await apiClient.get('/organizations/links');
const response = await apiClient.get('/organizations/connections');
return response.data;
},
@@ -48,23 +54,27 @@ export const organizationApi = {
return response.data;
},
createLink: async (
createConnectionRequest: async (
targetOrganizationId: string,
): Promise<{ success: boolean; data: { id: string; status: 'PENDING' | 'ACTIVE' | 'REJECTED' } }> => {
const response = await apiClient.post('/organizations/links', { targetOrganizationId });
const response = await apiClient.post('/organizations/connections', { targetOrganizationId });
return response.data;
},
respondLink: async (
linkId: string,
respondToConnectionRequest: async (
connectionId: string,
action: 'ACCEPT' | 'REJECT',
): Promise<{ success: boolean; data: { id: string; status: 'PENDING' | 'ACTIVE' | 'REJECTED' } }> => {
const response = await apiClient.patch(`/organizations/links/${linkId}/respond`, { action });
const response = await apiClient.patch(`/organizations/connections/${connectionId}/respond`, {
action,
});
return response.data;
},
deleteLink: async (linkId: string): Promise<{ success: boolean; data: { id: string }; message: string }> => {
const response = await apiClient.delete(`/organizations/links/${linkId}`);
deleteConnection: async (
connectionId: string,
): Promise<{ success: boolean; data: { id: string }; message: string }> => {
const response = await apiClient.delete(`/organizations/connections/${connectionId}`);
return response.data;
},