Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: reorg and search by description and tags #12959

Merged
merged 1 commit into from
Nov 28, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/scenes/appScenes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const appScenes: Record<Scene, () => any> = {
[Scene.Error404]: () => ({ default: preloadedScenes[Scene.Error404].component }),
[Scene.ErrorNetwork]: () => ({ default: preloadedScenes[Scene.ErrorNetwork].component }),
[Scene.ErrorProjectUnavailable]: () => ({ default: preloadedScenes[Scene.ErrorProjectUnavailable].component }),
[Scene.Dashboards]: () => import('./dashboard/Dashboards'),
[Scene.Dashboards]: () => import('./dashboard/dashboards/Dashboards'),
[Scene.Dashboard]: () => import('./dashboard/Dashboard'),
[Scene.Insight]: () => import('./insights/InsightScene'),
[Scene.Cohorts]: () => import('./cohorts/Cohorts'),
Expand Down
77 changes: 77 additions & 0 deletions frontend/src/scenes/dashboard/dashboards/Dashboards.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { useActions, useValues } from 'kea'
import { dashboardsModel } from '~/models/dashboardsModel'
import { Tabs } from 'antd'
import { dashboardsLogic, DashboardsTab } from 'scenes/dashboard/dashboards/dashboardsLogic'
import { NewDashboardModal } from 'scenes/dashboard/NewDashboardModal'
import { PageHeader } from 'lib/components/PageHeader'
import { SceneExport } from 'scenes/sceneTypes'
import { LemonButton } from 'lib/components/LemonButton'
import { LemonDivider } from 'lib/components/LemonDivider'
import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
import { inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'
import { LemonInput } from '@posthog/lemon-ui'
import { DeleteDashboardModal } from 'scenes/dashboard/DeleteDashboardModal'
import { DuplicateDashboardModal } from 'scenes/dashboard/DuplicateDashboardModal'
import { NoDashboards } from 'scenes/dashboard/dashboards/NoDashboards'
import { DashboardsTable } from 'scenes/dashboard/dashboards/DashboardsTable'

export const scene: SceneExport = {
component: Dashboards,
logic: dashboardsLogic,
}

export function Dashboards(): JSX.Element {
const { dashboardsLoading } = useValues(dashboardsModel)
const { setSearchTerm, setCurrentTab } = useActions(dashboardsLogic)
const { dashboards, searchTerm, currentTab } = useValues(dashboardsLogic)
const { showNewDashboardModal } = useActions(newDashboardLogic)
const { closePrompts } = useActions(inAppPromptLogic)

return (
<div>
<NewDashboardModal />
<DuplicateDashboardModal />
<DeleteDashboardModal />
<PageHeader
title="Dashboards"
buttons={
<LemonButton
data-attr={'new-dashboard'}
onClick={() => {
closePrompts()
showNewDashboardModal()
}}
type="primary"
>
New dashboard
</LemonButton>
}
/>
<Tabs
activeKey={currentTab}
style={{ borderColor: '#D9D9D9' }}
onChange={(tab) => setCurrentTab(tab as DashboardsTab)}
>
<Tabs.TabPane tab="All Dashboards" key={DashboardsTab.All} />
<Tabs.TabPane tab="Your Dashboards" key={DashboardsTab.Yours} />
<Tabs.TabPane tab="Pinned" key={DashboardsTab.Pinned} />
<Tabs.TabPane tab="Shared" key={DashboardsTab.Shared} />
</Tabs>
<div className="flex">
<LemonInput
type="search"
placeholder="Search for dashboards"
onChange={setSearchTerm}
value={searchTerm}
/>
<div />
</div>
<LemonDivider className="my-4" />
{dashboardsLoading || dashboards.length > 0 || searchTerm || currentTab !== DashboardsTab.All ? (
<DashboardsTable />
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

other than extracting and (and removing their dependencies this file hasn't changed

) : (
<NoDashboards />
)}
</div>
)
}
Original file line number Diff line number Diff line change
@@ -1,50 +1,34 @@
import { useActions, useValues } from 'kea'
Copy link
Member Author

@pauldambra pauldambra Nov 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

GitHub thinks this is a file rename/move. Silly GitHub 🤷

This is extracted from the moved Dashboards.tsx

import { dashboardsModel } from '~/models/dashboardsModel'
import { Card, Tabs } from 'antd'
import { dashboardsLogic, DashboardsTab } from 'scenes/dashboard/dashboardsLogic'
import { Link } from 'lib/components/Link'
import { AppstoreAddOutlined, PushpinFilled, PushpinOutlined, ShareAltOutlined } from '@ant-design/icons'
import { NewDashboardModal } from 'scenes/dashboard/NewDashboardModal'
import { PageHeader } from 'lib/components/PageHeader'
import { AvailableFeature, DashboardMode, DashboardType } from '~/types'
import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
import { dashboardsLogic, DashboardsTab } from 'scenes/dashboard/dashboards/dashboardsLogic'
import { userLogic } from 'scenes/userLogic'
import { teamLogic } from 'scenes/teamLogic'
import { duplicateDashboardLogic } from 'scenes/dashboard/duplicateDashboardLogic'
import { deleteDashboardLogic } from 'scenes/dashboard/deleteDashboardLogic'
import { LemonTable, LemonTableColumn, LemonTableColumns } from 'lib/components/LemonTable'
import { AvailableFeature, DashboardMode, DashboardType } from '~/types'
import { LemonButton } from 'lib/components/LemonButton'
import { DashboardEventSource } from 'lib/utils/eventUsageLogic'
import { PushpinFilled, PushpinOutlined, ShareAltOutlined } from '@ant-design/icons'
import { DashboardPrivilegeLevel } from 'lib/constants'
import { Link } from 'lib/components/Link'
import { urls } from 'scenes/urls'
import { SceneExport } from 'scenes/sceneTypes'
import { LemonTable, LemonTableColumn, LemonTableColumns } from 'lib/components/LemonTable'
import { Tooltip } from 'lib/components/Tooltip'
import { IconCottage, IconLock } from 'lib/components/icons'
import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
import { createdAtColumn, createdByColumn } from 'lib/components/LemonTable/columnUtils'
import { LemonButton } from 'lib/components/LemonButton'
import { More } from 'lib/components/LemonButton/More'
import { dashboardLogic } from './dashboardLogic'
import { LemonRow } from 'lib/components/LemonRow'
import { dashboardLogic } from 'scenes/dashboard/dashboardLogic'
import { LemonDivider } from 'lib/components/LemonDivider'
import { Tooltip } from 'lib/components/Tooltip'
import { IconCottage, IconLock } from 'lib/components/icons'
import { teamLogic } from 'scenes/teamLogic'
import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
import { DashboardPrivilegeLevel } from 'lib/constants'
import { inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'
import { LemonInput } from '@posthog/lemon-ui'
import { deleteDashboardLogic } from 'scenes/dashboard/deleteDashboardLogic'
import { DeleteDashboardModal } from 'scenes/dashboard/DeleteDashboardModal'
import { DuplicateDashboardModal } from 'scenes/dashboard/DuplicateDashboardModal'
import { duplicateDashboardLogic } from 'scenes/dashboard/duplicateDashboardLogic'

export const scene: SceneExport = {
component: Dashboards,
logic: dashboardsLogic,
}
import { LemonRow } from 'lib/components/LemonRow'

export function Dashboards(): JSX.Element {
export const DashboardsTable = (): JSX.Element => {
const { dashboardsLoading } = useValues(dashboardsModel)
const { unpinDashboard, pinDashboard } = useActions(dashboardsModel)
const { setSearchTerm, setCurrentTab } = useActions(dashboardsLogic)
const { setCurrentTab } = useActions(dashboardsLogic)
const { dashboards, searchTerm, currentTab } = useValues(dashboardsLogic)
const { showNewDashboardModal, addDashboard } = useActions(newDashboardLogic)
const { hasAvailableFeature } = useValues(userLogic)
const { currentTeam } = useValues(teamLogic)
const { closePrompts } = useActions(inAppPromptLogic)
const { showDuplicateDashboardModal } = useActions(duplicateDashboardLogic)
const { showDeleteDashboardModal } = useActions(deleteDashboardLogic)

Expand Down Expand Up @@ -83,7 +67,13 @@ export function Dashboards(): JSX.Element {
</Link>
{!canEditDashboard && (
<Tooltip title="You don't have edit permissions for this dashboard.">
<IconLock style={{ marginLeft: 6, verticalAlign: '-0.125em', display: 'inline' }} />
<IconLock
style={{
marginLeft: 6,
verticalAlign: '-0.125em',
display: 'inline',
}}
/>
</Tooltip>
)}
{is_shared && (
Expand Down Expand Up @@ -196,118 +186,36 @@ export function Dashboards(): JSX.Element {
]

return (
<div>
<NewDashboardModal />
<DuplicateDashboardModal />
<DeleteDashboardModal />
<PageHeader
title="Dashboards"
buttons={
<LemonButton
data-attr={'new-dashboard'}
onClick={() => {
closePrompts()
showNewDashboardModal()
}}
type="primary"
>
New dashboard
</LemonButton>
}
/>
<Tabs
activeKey={currentTab}
style={{ borderColor: '#D9D9D9' }}
onChange={(tab) => setCurrentTab(tab as DashboardsTab)}
>
<Tabs.TabPane tab="All Dashboards" key={DashboardsTab.All} />
<Tabs.TabPane tab="Your Dashboards" key={DashboardsTab.Yours} />
<Tabs.TabPane tab="Pinned" key={DashboardsTab.Pinned} />
<Tabs.TabPane tab="Shared" key={DashboardsTab.Shared} />
</Tabs>
<div className="flex">
<LemonInput
type="search"
placeholder="Search for dashboards"
onChange={setSearchTerm}
value={searchTerm}
/>
<div />
</div>
<LemonDivider className="my-4" />
{dashboardsLoading || dashboards.length > 0 || searchTerm || currentTab !== DashboardsTab.All ? (
<LemonTable
data-attr="dashboards-table"
pagination={{ pageSize: 100 }}
dataSource={dashboards}
rowKey="id"
columns={columns}
loading={dashboardsLoading}
defaultSorting={{ columnKey: 'name', order: 1 }}
emptyState={
searchTerm ? (
`No ${
currentTab === DashboardsTab.Pinned
? 'pinned '
: currentTab === DashboardsTab.Shared
? 'shared '
: ''
}dashboards matching "${searchTerm}"!`
) : currentTab === DashboardsTab.Pinned ? (
<>
No dashboards have been pinned for quick access yet.{' '}
<Link onClick={() => setCurrentTab(DashboardsTab.All)}>
Go to All Dashboards to pin one.
</Link>
</>
) : currentTab === DashboardsTab.Shared ? (
<>
No dashboards have been shared yet.{' '}
<Link onClick={() => setCurrentTab(DashboardsTab.All)}>
Go to All Dashboards to share one.
</Link>
</>
) : undefined
}
nouns={['dashboard', 'dashboards']}
/>
) : (
<div className="mt-4">
<p>Create your first dashboard:</p>
<div className="flex justify-center items-center gap-4">
<Card
title="Empty"
size="small"
style={{ width: 200, cursor: 'pointer' }}
onClick={() =>
addDashboard({
name: 'New Dashboard',
useTemplate: '',
})
}
>
<div style={{ textAlign: 'center', fontSize: 40 }}>
<AppstoreAddOutlined />
</div>
</Card>
<Card
title="App Default"
size="small"
style={{ width: 200, cursor: 'pointer' }}
onClick={() =>
addDashboard({
name: 'Web App Dashboard',
useTemplate: 'DEFAULT_APP',
})
}
>
<div style={{ textAlign: 'center', fontSize: 40 }}>
<AppstoreAddOutlined />
</div>
</Card>
</div>
</div>
)}
</div>
<LemonTable
data-attr="dashboards-table"
pagination={{ pageSize: 100 }}
dataSource={dashboards as DashboardType[]}
rowKey="id"
columns={columns}
loading={dashboardsLoading}
defaultSorting={{ columnKey: 'name', order: 1 }}
emptyState={
searchTerm ? (
`No ${
currentTab === DashboardsTab.Pinned
? 'pinned '
: currentTab === DashboardsTab.Shared
? 'shared '
: ''
}dashboards matching "${searchTerm}"!`
) : currentTab === DashboardsTab.Pinned ? (
<>
No dashboards have been pinned for quick access yet.{' '}
<Link onClick={() => setCurrentTab(DashboardsTab.All)}>Go to All Dashboards to pin one.</Link>
</>
) : currentTab === DashboardsTab.Shared ? (
<>
No dashboards have been shared yet.{' '}
<Link onClick={() => setCurrentTab(DashboardsTab.All)}>Go to All Dashboards to share one.</Link>
</>
) : undefined
}
nouns={['dashboard', 'dashboards']}
/>
)
}
46 changes: 46 additions & 0 deletions frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { useActions } from 'kea'
import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
import { Card } from 'antd'
import { AppstoreAddOutlined } from '@ant-design/icons'

export const NoDashboards = (): JSX.Element => {
const { addDashboard } = useActions(newDashboardLogic)

return (
<div className="mt-4">
<p>Create your first dashboard:</p>
<div className="flex justify-center items-center gap-4">
<Card
title="Empty"
size="small"
style={{ width: 200, cursor: 'pointer' }}
onClick={() =>
addDashboard({
name: 'New Dashboard',
useTemplate: '',
})
}
>
<div style={{ textAlign: 'center', fontSize: 40 }}>
<AppstoreAddOutlined />
</div>
</Card>
<Card
title="App Default"
size="small"
style={{ width: 200, cursor: 'pointer' }}
onClick={() =>
addDashboard({
name: 'Web App Dashboard',
useTemplate: 'DEFAULT_APP',
})
}
>
<div style={{ textAlign: 'center', fontSize: 40 }}>
<AppstoreAddOutlined />
</div>
</Card>
</div>
</div>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const dashboardsLogic = kea<dashboardsLogicType>({
return dashboards
}
return new Fuse(dashboards, {
keys: ['key', 'name'],
keys: ['key', 'name', 'description', 'tags'],
threshold: 0.3,
})
.search(searchTerm)
Expand Down