feat: add and remove insight from dashboard modal

cypress/productAnalytics/index.ts

@@ -167,6 +167,7 @@ export const dashboard = {
 
         cy.get('[data-attr=dashboard-add-graph-header]').contains('Add insight').click()
         cy.get('[data-attr=toast-close-button]').click({ multiple: true })
+        cy.get('[data-attr=dashboard-add-new-insight]').contains('New insight').click()
 
         if (insightName) {
             cy.get('[data-attr="top-bar-name"] button').click()

frontend/src/scenes/dashboard/AddInsightToDashboardModal.tsx

@@ -0,0 +1,45 @@
+import { useActions, useValues } from 'kea'
+import { BindLogic } from 'kea'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonModal } from 'lib/lemon-ui/LemonModal'
+import { addSavedInsightsModalLogic } from 'scenes/saved-insights/addSavedInsightsModalLogic'
+import { AddSavedInsightsToDashboard } from 'scenes/saved-insights/AddSavedInsightsToDashboard'
+import { urls } from 'scenes/urls'
+
+import { addInsightToDashboardLogic } from './addInsightToDashboardModalLogic'
+import { dashboardLogic } from './dashboardLogic'
+
+export function AddInsightToDashboardModal(): JSX.Element {
+    const { hideAddInsightToDashboardModal } = useActions(addInsightToDashboardLogic)
+    const { addInsightToDashboardModalVisible } = useValues(addInsightToDashboardLogic)
+    const { dashboard } = useValues(dashboardLogic)
+    return (
+        <BindLogic logic={addSavedInsightsModalLogic} props={{}}>
+            <LemonModal
+                title="Add insight to dashboard"
+                onClose={hideAddInsightToDashboardModal}
+                isOpen={addInsightToDashboardModalVisible}
+                footer={
+                    <>
+                        <LemonButton
+                            type="secondary"
+                            data-attr="dashboard-cancel"
+                            onClick={hideAddInsightToDashboardModal}
+                        >
+                            Cancel
+                        </LemonButton>
+                        <LemonButton
+                            type="primary"
+                            data-attr="dashboard-add-new-insight"
+                            to={urls.insightNew(undefined, dashboard?.id)}
+                        >
+                            New insight
+                        </LemonButton>
+                    </>
+                }
+            >
+                <AddSavedInsightsToDashboard />
+            </LemonModal>
+        </BindLogic>
+    )
+}

frontend/src/scenes/dashboard/DashboardHeader.tsx

@@ -28,6 +28,8 @@ import { notebooksModel } from '~/models/notebooksModel'
 import { tagsModel } from '~/models/tagsModel'
 import { DashboardMode, DashboardType, ExporterFormat, QueryBasedInsightModel } from '~/types'
 
+import { AddInsightToDashboardModal } from './AddInsightToDashboardModal'
+import { addInsightToDashboardLogic } from './addInsightToDashboardModalLogic'
 import { DASHBOARD_RESTRICTION_OPTIONS } from './DashboardCollaborators'
 import { dashboardCollaboratorsLogic } from './dashboardCollaboratorsLogic'
 import { dashboardLogic } from './dashboardLogic'
@@ -53,7 +55,7 @@ export function DashboardHeader(): JSX.Element | null {
     const { asDashboardTemplate } = useValues(dashboardLogic)
     const { updateDashboard, pinDashboard, unpinDashboard } = useActions(dashboardsModel)
     const { createNotebookFromDashboard } = useActions(notebooksModel)
-
+    const { showAddInsightToDashboardModal } = useActions(addInsightToDashboardLogic)
     const { setDashboardTemplate, openDashboardTemplateEditor } = useActions(dashboardTemplateEditorLogic)
 
     const { user } = useValues(userLogic)
@@ -114,6 +116,7 @@ export function DashboardHeader(): JSX.Element | null {
                     )}
                     {canEditDashboard && <DeleteDashboardModal />}
                     {canEditDashboard && <DuplicateDashboardModal />}
+                    {canEditDashboard && <AddInsightToDashboardModal />}
                 </>
             )}
 
@@ -290,7 +293,7 @@ export function DashboardHeader(): JSX.Element | null {
                             )}
                             {dashboard ? (
                                 <LemonButton
-                                    to={urls.insightNew(undefined, dashboard.id)}
+                                    onClick={showAddInsightToDashboardModal}
                                     type="primary"
                                     data-attr="dashboard-add-graph-header"
                                     disabledReason={canEditDashboard ? null : DASHBOARD_CANNOT_EDIT_MESSAGE}

frontend/src/scenes/dashboard/EmptyDashboardComponent.tsx

@@ -1,14 +1,13 @@
 import './EmptyDashboardComponent.scss'
 
 import { IconPlus } from '@posthog/icons'
-import { useValues } from 'kea'
+import { useActions } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import React from 'react'
-import { urls } from 'scenes/urls'
 
+import { addInsightToDashboardLogic } from './addInsightToDashboardModalLogic'
 import { DASHBOARD_CANNOT_EDIT_MESSAGE } from './DashboardHeader'
-import { dashboardLogic } from './dashboardLogic'
 
 function SkeletonCard({ children, active }: { children: React.ReactNode; active: boolean }): JSX.Element {
     return (
@@ -77,8 +76,7 @@ function SkeletonCardTwo({ active }: { active: boolean }): JSX.Element {
 }
 
 export function EmptyDashboardComponent({ loading, canEdit }: { loading: boolean; canEdit: boolean }): JSX.Element {
-    const { dashboard } = useValues(dashboardLogic)
-
+    const { showAddInsightToDashboardModal } = useActions(addInsightToDashboardLogic)
     return (
         <div className="EmptyDashboard">
             {!loading && (
@@ -88,7 +86,7 @@ export function EmptyDashboardComponent({ loading, canEdit }: { loading: boolean
                     <div className="mt-4 text-center">
                         <LemonButton
                             data-attr="dashboard-add-graph-header"
-                            to={urls.insightNew(undefined, dashboard?.id)}
+                            onClick={showAddInsightToDashboardModal}
                             type="primary"
                             icon={<IconPlus />}
                             center

frontend/src/scenes/dashboard/addInsightToDashboardModalLogic.ts

@@ -0,0 +1,20 @@
+import { actions, kea, path, reducers } from 'kea'
+
+import type { addInsightToDashboardLogicType } from './addInsightToDashboardModalLogicType'
+
+export const addInsightToDashboardLogic = kea<addInsightToDashboardLogicType>([
+    path(['scenes', 'dashboard', 'addInsightToDashboardLogic']),
+    actions({
+        showAddInsightToDashboardModal: true,
+        hideAddInsightToDashboardModal: true,
+    }),
+    reducers({
+        addInsightToDashboardModalVisible: [
+            false,
+            {
+                showAddInsightToDashboardModal: () => true,
+                hideAddInsightToDashboardModal: () => false,
+            },
+        ],
+    }),
+])

frontend/src/scenes/insights/insightLogic.tsx

@@ -121,7 +121,6 @@ export const insightLogic: LogicWrapper<insightLogicType> = kea<insightLogicType
                     if (!Object.entries(insightUpdate).length) {
                         return values.insight
                     }
-
                     const response = await insightsApi.update(values.insight.id as number, insightUpdate)
                     breakpoint()
                     const updatedInsight: QueryBasedInsightModel = {

frontend/src/scenes/saved-insights/AddSavedInsightsToDashboard.tsx

@@ -0,0 +1,175 @@
+import './SavedInsights.scss'
+
+import { IconMinusSmall, IconPlusSmall } from '@posthog/icons'
+import { useActions, useValues } from 'kea'
+import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
+import { TZLabel } from 'lib/components/TZLabel'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { LemonTable, LemonTableColumn, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
+import { createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
+import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
+import { Spinner } from 'lib/lemon-ui/Spinner'
+import { dashboardLogic } from 'scenes/dashboard/dashboardLogic'
+import { SavedInsightsEmptyState } from 'scenes/insights/EmptyStates'
+import { useSummarizeInsight } from 'scenes/insights/summarizeInsight'
+import { organizationLogic } from 'scenes/organizationLogic'
+import { SavedInsightsFilters } from 'scenes/saved-insights/SavedInsightsFilters'
+import { urls } from 'scenes/urls'
+
+import { QueryBasedInsightModel, SavedInsightsTabs } from '~/types'
+
+import { addSavedInsightsModalLogic, INSIGHTS_PER_PAGE } from './addSavedInsightsModalLogic'
+import { InsightIcon } from './SavedInsights'
+
+export function AddSavedInsightsToDashboard(): JSX.Element {
+    const { modalPage, insights, count, insightsLoading, filters, sorting, dashboardUpdatesInProgress } =
+        useValues(addSavedInsightsModalLogic)
+    const { setModalPage, addInsightToDashboard, removeInsightFromDashboard, setModalFilters } =
+        useActions(addSavedInsightsModalLogic)
+
+    const { hasTagging } = useValues(organizationLogic)
+    const { dashboard } = useValues(dashboardLogic)
+
+    const summarizeInsight = useSummarizeInsight()
+
+    const { tab } = filters
+
+    const startCount = (modalPage - 1) * INSIGHTS_PER_PAGE + 1
+    const endCount = Math.min(modalPage * INSIGHTS_PER_PAGE, count)
+
+    const columns: LemonTableColumns<QueryBasedInsightModel> = [
+        {
+            key: 'id',
+            width: 32,
+            render: function renderType(_, insight) {
+                return <InsightIcon insight={insight} className="text-muted text-2xl" />
+            },
+        },
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            render: function renderName(name: string, insight) {
+                return (
+                    <>
+                        <LemonTableLink
+                            to={urls.insightView(insight.short_id)}
+                            title={<>{name || <i>{summarizeInsight(insight.query)}</i>}</>}
+                            description={insight.description}
+                        />
+                    </>
+                )
+            },
+        },
+        ...(hasTagging
+            ? [
+                  {
+                      title: 'Tags',
+                      dataIndex: 'tags' as keyof QueryBasedInsightModel,
+                      key: 'tags',
+                      render: function renderTags(tags: string[]) {
+                          return <ObjectTags tags={tags} staticOnly />
+                      },
+                  },
+              ]
+            : []),
+        ...(tab === SavedInsightsTabs.Yours
+            ? []
+            : [
+                  createdByColumn() as LemonTableColumn<
+                      QueryBasedInsightModel,
+                      keyof QueryBasedInsightModel | undefined
+                  >,
+              ]),
+        createdAtColumn() as LemonTableColumn<QueryBasedInsightModel, keyof QueryBasedInsightModel | undefined>,
+        {
+            title: 'Last modified',
+            sorter: true,
+            dataIndex: 'last_modified_at',
+            render: function renderLastModified(last_modified_at: string) {
+                return (
+                    <div className="whitespace-nowrap">{last_modified_at && <TZLabel time={last_modified_at} />}</div>
+                )
+            },
+        },
+        {
+            width: 0,
+            render: function Render(_, insight) {
+                const isInDashboard = dashboard?.tiles.some((tile) => tile.insight?.id === insight.id)
+                return (
+                    <LemonButton
+                        type="secondary"
+                        status={isInDashboard ? 'danger' : 'default'}
+                        size="small"
+                        fullWidth
+                        disabled={dashboardUpdatesInProgress[insight.id]}
+                        onClick={(e) => {
+                            e.preventDefault()
+                            if (dashboardUpdatesInProgress[insight.id]) {
+                                return
+                            }
+                            isInDashboard
+                                ? removeInsightFromDashboard(insight, dashboard?.id || 0)
+                                : addInsightToDashboard(insight, dashboard?.id || 0)
+                        }}
+                    >
+                        {dashboardUpdatesInProgress[insight.id] ? (
+                            <Spinner textColored />
+                        ) : isInDashboard ? (
+                            <IconMinusSmall />
+                        ) : (
+                            <IconPlusSmall />
+                        )}
+                    </LemonButton>
+                )
+            },
+        },
+    ]
+
+    return (
+        <div className="saved-insights">
+            <SavedInsightsFilters filters={filters} setFilters={setModalFilters} />
+            <LemonDivider className="my-4" />
+            <div className="flex justify-between mb-4 gap-2 flex-wrap mt-2 items-center">
+                <span className="text-muted-alt">
+                    {count
+                        ? `${startCount}${endCount - startCount > 1 ? '-' + endCount : ''} of ${count} insight${
+                              count === 1 ? '' : 's'
+                          }`
+                        : null}
+                </span>
+            </div>
+            {!insightsLoading && insights.count < 1 ? (
+                <SavedInsightsEmptyState />
+            ) : (
+                <>
+                    <LemonTable
+                        loading={insightsLoading}
+                        columns={columns}
+                        dataSource={insights.results}
+                        pagination={{
+                            controlled: true,
+                            currentPage: modalPage,
+                            pageSize: INSIGHTS_PER_PAGE,
+                            entryCount: count,
+                            onForward: () => setModalPage(modalPage + 1),
+                            onBackward: () => setModalPage(modalPage - 1),
+                        }}
+                        sorting={sorting}
+                        onSort={(newSorting) =>
+                            setModalFilters({
+                                order: newSorting
+                                    ? `${newSorting.order === -1 ? '-' : ''}${newSorting.columnKey}`
+                                    : undefined,
+                            })
+                        }
+                        rowKey="id"
+                        loadingSkeletonRows={INSIGHTS_PER_PAGE}
+                        nouns={['insight', 'insights']}
+                    />
+                </>
+            )}
+        </div>
+    )
+}

frontend/src/scenes/saved-insights/SavedInsights.tsx

@@ -612,7 +612,7 @@ export function SavedInsights(): JSX.Element {
                 <Alerts alertId={alertModalId} />
             ) : (
                 <>
-                    <SavedInsightsFilters />
+                    <SavedInsightsFilters filters={filters} setFilters={setSavedInsightsFilters} />
                     <LemonDivider className="my-4" />
                     <div className="flex justify-between mb-4 gap-2 flex-wrap mt-2 items-center">
                         <span className="text-muted-alt">