{error.message}
+ ) + if (isLoading || content === undefined) + returnLoading…
+ return ( +
+
+ void setResource(id)} />
+ {data.errors.map(({ edge, message }) => (
+
+
+ ) : tab.id === WORKFLOW_TAB ? (
+ row.kind === tab.id)}
+ canEdit={canManage}
+ credentialsByEnv={data.credentialsByEnv}
+ empty={`No ${tab.label} referenced by deployed workflows.`}
+ />
+ )}
+
+ ) : null}
+
+ )
+}
diff --git a/apps/sim/app/playground/org/components/environments/index.ts b/apps/sim/app/playground/org/components/environments/index.ts
new file mode 100644
index 00000000000..a528794d847
--- /dev/null
+++ b/apps/sim/app/playground/org/components/environments/index.ts
@@ -0,0 +1,42 @@
+export { EnvironmentsTab } from '@/app/playground/org/components/environments/environments-tab'
+export { LineageStrip } from '@/app/playground/org/components/environments/lineage-strip'
+export {
+ EnvironmentTable,
+ MappingGrid,
+ SkeletonRows,
+ StatusBadge,
+ WorkflowGrid,
+} from '@/app/playground/org/components/environments/mapping-grid'
+export {
+ buildMappingRows,
+ buildWorkflowRows,
+ type EdgeDiff,
+ type EdgeMapping,
+ type EnvironmentColumn,
+ entryStatus,
+ isCopyableKind,
+ type LineageEdge,
+ lineageEdges,
+ MAPPING_STATUS,
+ type MappingCell,
+ type MappingRow,
+ type MappingStatus,
+ orderEnvironments,
+ RESOURCE_TAB_IDS,
+ RESOURCE_TABS,
+ type ResourceTab,
+ type ResourceTabId,
+ WORKFLOW_TAB,
+ type WorkflowCell,
+ type WorkflowRow,
+} from '@/app/playground/org/components/environments/mapping-model'
+export {
+ MOCK_MAPPING_ROWS,
+ MOCK_WORKFLOW_ROWS,
+ mockEnvironments,
+} from '@/app/playground/org/components/environments/mock-mappings'
+export { ResourceTabs } from '@/app/playground/org/components/environments/resource-tabs'
+export {
+ type EdgeError,
+ useEnvironmentMappings,
+} from '@/app/playground/org/components/environments/use-environment-mappings'
diff --git a/apps/sim/app/playground/org/components/environments/lineage-strip.tsx b/apps/sim/app/playground/org/components/environments/lineage-strip.tsx
new file mode 100644
index 00000000000..436e98d0d6e
--- /dev/null
+++ b/apps/sim/app/playground/org/components/environments/lineage-strip.tsx
@@ -0,0 +1,254 @@
+'use client'
+
+import { useState } from 'react'
+import {
+ Chip,
+ ChipConfirmModal,
+ ChipLink,
+ ChipTag,
+ cn,
+ OverflowText,
+ Tooltip,
+ toast,
+} from '@sim/emcn'
+import { ArrowRight, ArrowUpRight, Plus, RefreshCw, Server, TriangleAlert } from '@sim/emcn/icons'
+import { getErrorMessage } from '@sim/utils/errors'
+import { getWorkspaceSettingsHref } from '@/components/settings/navigation'
+import type { GetForkLineageResponse } from '@/lib/api/contracts/workspace-fork'
+import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
+import type { EnvironmentColumn } from '@/app/playground/org/components/environments/mapping-model'
+import type { Project } from '@/app/playground/org/lib/project'
+import { workspaceRoutes } from '@/app/playground/org/lib/routes'
+import {
+ forkIdParam,
+ forkSyncDirectionParam,
+} from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
+import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
+import { ForkWorkspaceModal } from '@/ee/workspace-forking/components/fork-workspace-modal/fork-workspace-modal'
+import { useUnlinkFork } from '@/ee/workspace-forking/hooks/workspace-fork'
+import { useWorkspaceCreationPolicy } from '@/hooks/queries/workspace'
+import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
+
+/** Explains a disabled Sync whose parent workspace the viewer cannot open. */
+const NO_ACCESS_TOOLTIP = "You don't have access to the parent workspace"
+
+/** The fork's sync page for its parent edge, pulling the parent's changes in. */
+function syncHref(column: EnvironmentColumn, parentId: string): string {
+ return getWorkspaceSettingsHref(
+ column.id,
+ 'forks',
+ new URLSearchParams({ [forkIdParam.key]: parentId, [forkSyncDirectionParam.key]: 'pull' })
+ )
+}
+
+interface UnlinkTarget {
+ column: EnvironmentColumn
+ parent: EnvironmentColumn
+}
+
+interface EnvironmentCardProps {
+ column: EnvironmentColumn
+ parent?: EnvironmentColumn
+ current: boolean
+ lineage?: GetForkLineageResponse
+ canManage: boolean
+ /** A mock project's environments are not workspaces, so nothing links anywhere. */
+ isMock: boolean
+ onDisconnect: () => void
+}
+
+function EnvironmentCard({
+ column,
+ parent,
+ current,
+ lineage,
+ canManage,
+ isMock,
+ onDisconnect,
+}: EnvironmentCardProps) {
+ const parentAccessible = lineage?.parent?.viewerAccessible ?? true
+ const undoable = lineage?.undoableRun ?? null
+ const showSync = canManage && parent !== undefined
+ return (
+ {notice}
: null} + {showGrid ? ( ++ Couldn't load the mapping between {nameOf.get(edge.parentId) ?? edge.parentId} and{' '} + {nameOf.get(edge.childId) ?? edge.childId}: {message} +
+ ))} + {data.isPending ? ( +
+ Current : null}
+ {canManage && parent ? (
+
+ + {parent ? `Forked from ${parent.label}` : 'Root of the lineage'} + {undoable ? ` · last sync from ${undoable.otherName} can be undone` : ''} +
+ {isMock ? null : ( +
+
+ Open workspace
+
+ {showSync && parent && parentAccessible ? (
+
+ Sync
+
+ ) : null}
+ {showSync && !parentAccessible ? (
+
+
+
+
+ Sync
+
+
+
+ {NO_ACCESS_TOOLTIP}
+
+ ) : null}
+
+ )}
+
+ setForkModalOpen(true)}>
+ Create fork
+
+ ) : null}
+
+ Environments
+ {canManage ? ( +-
+ {columns.map((column, index) => {
+ const parent = column.parentId ? byId.get(column.parentId) : undefined
+ /** The arrow reads "forked from" only when the parent is the card before this one. */
+ const chained = index > 0 && parent?.id === columns[index - 1].id
+ return (
+
-
+ {index > 0 ? (
+
+ ) : null} + { + if (parent) setConfirmUnlink({ column, parent }) + }} + /> +
+ )
+ })}
+
+
+
+
+
+
+ )
+}
+
+interface EmptyRowProps {
+ columns: readonly EnvironmentColumn[]
+ children: ReactNode
+}
+
+function EmptyRow({ columns, children }: EmptyRowProps) {
+ return (
+ | + Resource + | + {columns.map((column) => ( +
+
+ {column.label}
+
+ |
+ ))}
+
|---|
+
+ )
+ }
+ const copyable = isCopyableKind(entry.kind) && !entry.sourceDeleted
+ const targetListed = entry.candidates.some((candidate) => candidate.id === entry.targetId)
+ const options = [
+ // A stored target past the capped candidate list still shows its name when closed.
+ ...(entry.targetId && !targetListed
+ ? [{ label: cell.label, value: entry.targetId, hidden: true }]
+ : []),
+ // The way back to the copy flow after mapping: clears the target via onSelect.
+ ...(copyable && entry.targetId
+ ? [{ label: 'New copy', value: NEW_COPY_VALUE, onSelect: () => onChange(null) }]
+ : []),
+ ...entry.candidates.map((candidate) => ({ label: candidate.label, value: candidate.id })),
+ ]
+ return (
+
+ onChange(value)}
+ placeholder={copyable ? 'Copy on sync' : 'Select target'}
+ searchable
+ searchPlaceholder='Search targets'
+ disabled={pending}
+ />
+ {cell.status ?
+ )
+}
+
+interface MappingGridProps {
+ columns: readonly EnvironmentColumn[]
+ rows: readonly MappingRow[]
+ /** Admin with forking available: child cells become candidate pickers. */
+ canEdit: boolean
+ empty: string
+ /** Credentials by environment id, for the provider mark on credential rows. */
+ credentialsByEnv?: ReadonlyMap
+ {display?.icon ?
+ )
+}
+
+/**
+ * One row per resource, one cell per environment. A child cell's picker saves through the
+ * edge's mapping route at once, so the forks settings page of that fork shows the same target.
+ */
+export function MappingGrid({ columns, rows, canEdit, credentialsByEnv, empty }: MappingGridProps) {
+ const updateMapping = useUpdateForkMapping()
+ const pendingKey =
+ updateMapping.isPending && updateMapping.variables
+ ? `${updateMapping.variables.workspaceId}:${updateMapping.variables.body.entries[0]?.sourceId ?? ''}`
+ : null
+
+ const saveTarget = (cell: MappingCell, targetId: string | null) => {
+ if (!cell.entry || !cell.edge) return
+ updateMapping.mutate(
+ {
+ workspaceId: cell.edge.childId,
+ body: {
+ otherWorkspaceId: cell.edge.parentId,
+ direction: 'pull',
+ entries: [
+ { resourceType: cell.entry.resourceType, sourceId: cell.entry.sourceId, targetId },
+ ],
+ },
+ },
+ {
+ onSuccess: () => toast.success('Mapping saved'),
+ onError: (error) => toast.error(getErrorMessage(error, 'Failed to save mapping')),
+ }
+ )
+ }
+
+ return (
+
+
+ )
+}
+
+interface WorkflowGridProps {
+ columns: readonly EnvironmentColumn[]
+ rows: readonly WorkflowRow[]
+ empty: string
+}
+
+/** One row per deployed workflow, with what a sync would do on each edge and each side's deployed state. */
+export function WorkflowGrid({ columns, rows, empty }: WorkflowGridProps) {
+ return (
+
+ {cell.status ?
+
Sources
- {issue.investigation.sources.map((source) => (
-
- {source.label}
-
- ))}
+ {issue.investigation.sources.map((source) => {
+ const href = resolveHref(
+ source.kind === 'workflow' ? 'workflow' : null,
+ source.label
+ )
+ return href ? (
+
+ {source.label}
+
+ ) : (
+
+ {source.label}
+
+ )
+ })}
)}
{issue.resources.length > 0 && (
Resources
- {issue.resources.map((resource) => (
-
- {resource.name}
-
- ))}
+ {issue.resources.map((resource) => {
+ const href = resolveHref(resource.kind, resource.name)
+ return href ? (
+
+ {resource.name}
+
+ ) : (
+
+ {resource.name}
+
+ )
+ })}
)}
@@ -405,3 +425,34 @@ function ActivityRow({ activity }: { activity: Activity }) {
No issues yet.
return ( @@ -32,7 +31,7 @@ export function IssuesList({ workspace }: { workspace: Workspace }) {