feat: allow extra buttons in insight card more menu (PostHog#12133)

Author: pauldambra

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

@@ -154,6 +154,8 @@ export interface InsightCardProps extends React.HTMLAttributes<HTMLDivElement> {
     rename?: () => void
     duplicate?: () => void
     moveToDashboard?: (dashboard: DashboardType) => void
+    /** buttons to add to the "more" menu on the card**/
+    moreButtons?: JSX.Element | null
 }
 
 interface InsightMetaProps
@@ -170,6 +172,7 @@ interface InsightMetaProps
         | 'moveToDashboard'
         | 'showEditingControls'
         | 'showDetailsControls'
+        | 'moreButtons'
     > {
     /**
      * Optional callback to update height of the primary InsightMeta div. Allow for coordinating InsightViz height
@@ -195,6 +198,7 @@ function InsightMeta({
     setAreDetailsShown,
     showEditingControls = true,
     showDetailsControls = true,
+    moreButtons,
 }: InsightMetaProps): JSX.Element {
     const { short_id, name, description, tags, color, filters, dashboards } = insight
     const { exporterResourceParams, insightProps } = useValues(insightLogic)
@@ -406,6 +410,12 @@ function InsightMeta({
                                                             ]}
                                                         />
                                                     ) : null}
+                                                    {moreButtons && (
+                                                        <>
+                                                            <LemonDivider />
+                                                            {moreButtons}
+                                                        </>
+                                                    )}
                                                     {editable && (
                                                         <>
                                                             <LemonDivider />
@@ -553,6 +563,7 @@ function InsightCardInternal(
         moveToDashboard,
         className,
         children,
+        moreButtons,
         ...divProps
     }: InsightCardProps,
     ref: React.Ref<HTMLDivElement>
@@ -616,6 +627,7 @@ function InsightCardInternal(
                     setAreDetailsShown={setAreDetailsShown}
                     showEditingControls={showEditingControls}
                     showDetailsControls={showDetailsControls}
+                    moreButtons={moreButtons}
                 />
                 <InsightViz
                     insight={insight}

frontend/src/scenes/dashboard/DashboardItems.tsx

@@ -10,12 +10,29 @@ import { dashboardLogic, BREAKPOINT_COLUMN_COUNTS, BREAKPOINTS } from 'scenes/da
 import clsx from 'clsx'
 import { InsightCard } from 'lib/components/InsightCard'
 import { useResizeObserver } from 'lib/hooks/useResizeObserver'
+import { LemonButton } from 'lib/components/LemonButton'
+import { DashboardEventSource } from 'lib/utils/eventUsageLogic'
 
 export function DashboardItems(): JSX.Element {
-    const { dashboard, items, layouts, dashboardMode, placement, isRefreshing, highlightedInsightId, refreshStatus } =
-        useValues(dashboardLogic)
-    const { updateLayouts, updateContainerWidth, updateItemColor, removeItem, refreshAllDashboardItems } =
-        useActions(dashboardLogic)
+    const {
+        dashboard,
+        items,
+        layouts,
+        dashboardMode,
+        placement,
+        isRefreshing,
+        highlightedInsightId,
+        refreshStatus,
+        canEditDashboard,
+    } = useValues(dashboardLogic)
+    const {
+        updateLayouts,
+        updateContainerWidth,
+        updateItemColor,
+        removeItem,
+        refreshAllDashboardItems,
+        setDashboardMode,
+    } = useActions(dashboardLogic)
     const { duplicateInsight, renameInsight, moveToDashboard } = useActions(insightsModel)
 
     const [resizingItem, setResizingItem] = useState<any>(null)
@@ -103,6 +120,19 @@ export function DashboardItems(): JSX.Element {
                             DashboardPlacement.ProjectHomepage,
                         ].includes(placement)}
                         showDetailsControls={placement != DashboardPlacement.Export}
+                        moreButtons={
+                            canEditDashboard ? (
+                                <LemonButton
+                                    onClick={() =>
+                                        setDashboardMode(DashboardMode.Edit, DashboardEventSource.MoreDropdown)
+                                    }
+                                    status="stealth"
+                                    fullWidth
+                                >
+                                    Edit layout (E)
+                                </LemonButton>
+                            ) : null
+                        }
                     />
                 ))}
             </ReactGridLayout>