feat(insight-card): link cards to the insight's own project

frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx

@@ -223,9 +223,13 @@
     onEnterEditModeFromEdge?: (event: React.MouseEvent<HTMLDivElement>, edge: EditModeEdge) => void
     /** Called when the user mousedowns on the card (drag handle) in view mode to enter edit mode. */
     onDragHandleMouseDown?: React.MouseEventHandler<HTMLDivElement>
+    /** Project the insight belongs to, when that is not the current project. The card's links then open it there. */
+    projectId?: number
+    /** Shown above the title, for a card that has to name where its insight comes from. */
+    contextHeading?: JSX.Element | null
 }
 
 function InsightCardInternal(
     {
         tile,
         insight,
@@ -262,6 +266,8 @@
         filtersOverride,
         variablesOverride,
         children,
+        projectId,
+        contextHeading,
         breakdownColorOverride: _breakdownColorOverride,
         dataColorThemeId: _dataColorThemeId,
         surveyOpportunity,
@@ -347,7 +353,7 @@
     const sharedView = isSharedView()
 
     // Empty states that completely replace the Query component.
     const BlockingEmptyState = (() => {
         // Check for access denied - use the same logic as other components
         const canViewInsight = insight?.user_access_level
             ? accessLevelSatisfied(
@@ -465,6 +471,8 @@
                     <InsightMeta
                         tile={tile}
                         insight={insight}
+                        projectId={projectId}
+                        contextHeading={contextHeading}
                         ribbonColor={ribbonColor}
                         dashboardId={dashboardId}
                         canEditDashboard={canEditDashboard}

frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx

@@ -120,6 +120,8 @@
     | 'placement'
     | 'surveyOpportunity'
     | 'showCreateAnomalyAlertButton'
+    | 'projectId'
+    | 'contextHeading'
 > {
     /** Called when the user mousedowns on the card meta (drag handle) in view mode to enter edit mode. */
     onDragHandleMouseDown?: React.MouseEventHandler<HTMLDivElement>
@@ -133,7 +135,7 @@
     onCreateAnomalyAlert?: () => void
 }
 
 export function InsightMeta({
     tile,
     insight,
     ribbonColor,
@@ -167,6 +169,8 @@
     onCreateAlert,
     onEditAlert,
     onCreateAnomalyAlert,
+    projectId,
+    contextHeading,
 }: InsightMetaProps): JSX.Element {
     const { short_id, name, next_allowed_client_refresh: nextAllowedClientRefresh } = insight
     const tileFiltersOverride = tile?.filters_overrides
@@ -450,15 +454,16 @@
         : undefined
 
     // Carries the dashboard's filters and variables, so the link opens exactly what the tile shows
-    const insightViewUrl = urls.insightView(
-        short_id,
-        dashboardId,
-        variablesOverride,
-        filtersOverride,
-        tileFiltersOverride
+    // A card showing another project's insight must link into that project, not the current one.
+    const inInsightProject = (path: string): string => (projectId ? urls.project(projectId, path) : path)
+    const insightViewUrl = inInsightProject(
+        urls.insightView(short_id, dashboardId, variablesOverride, filtersOverride, tileFiltersOverride)
     )
     const copyInsightLink = (): void => {
-        void copyToClipboard(urls.absolute(urls.currentProject(insightViewUrl)), 'insight link')
+        void copyToClipboard(
+            urls.absolute(projectId ? insightViewUrl : urls.currentProject(insightViewUrl)),
+            'insight link'
+        )
     }
 
     return (
@@ -472,7 +477,16 @@
                 areDetailsShown={areDetailsShown}
                 detailsTooltip="Show insight details, such as creator, last edit, and applied filters."
                 onMouseDown={onDragHandleMouseDown}
-                topHeading={topHeadingEl}
+                topHeading={
+                    contextHeading ? (
+                        <span className="flex items-center gap-2 min-w-0">
+                            {contextHeading}
+                            {topHeadingEl}
+                        </span>
+                    ) : (
+                        topHeadingEl
+                    )
+                }
                 popoverTopHeading={popoverTopHeadingEl}
                 content={
                     <InsightMetaContent
@@ -531,40 +545,44 @@
                         {canEditInsight && (
                             <>
                                 <LemonButton
-                                    to={
+                                    to={inInsightProject(
                                         isDataVisualizationNode(insight.query)
                                             ? urls.sqlEditor({
                                                   insightShortId: short_id,
                                                   dashboard: dashboardId ?? undefined,
                                               })
                                             : urls.insightEdit(short_id, dashboardId)
-                                    }
+                                    )}
                                     fullWidth
                                     {...getOverrideWarningPropsForButton(filtersOverride, variablesOverride)}
                                 >
                                     Edit
                                 </LemonButton>
-                                <LemonButton onClick={rename} fullWidth>
-                                    Rename
-                                </LemonButton>
+                                {rename && (
+                                    <LemonButton onClick={rename} fullWidth>
+                                        Rename
+                                    </LemonButton>
+                                )}
                                 {tile && (
                                     <LemonButton onClick={setOverride} fullWidth>
                                         Set override
                                     </LemonButton>
                                 )}
                             </>
                         )}
-                        <LemonButton
-                            onClick={duplicate}
-                            fullWidth
-                            data-attr={
-                                dashboardId
-                                    ? 'duplicate-insight-from-dashboard'
-                                    : 'duplicate-insight-from-card-list-view'
-                            }
-                        >
-                            Duplicate
-                        </LemonButton>
+                        {duplicate && (
+                            <LemonButton
+                                onClick={duplicate}
+                                fullWidth
+                                data-attr={
+                                    dashboardId
+                                        ? 'duplicate-insight-from-dashboard'
+                                        : 'duplicate-insight-from-card-list-view'
+                                }
+                            >
+                                Duplicate
+                            </LemonButton>
+                        )}
                         {showDashboardAlertsMenuItem && insight.id ? (
                             <LemonButton
                                 onClick={() => {
@@ -836,7 +854,7 @@
     )
 }
 
 export function InsightMetaContent({
     title,
     fallbackTitle,
     description,