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

Dashboard item description (1/2) #4240

Closed
wants to merge 21 commits into from
Closed
Changes from 7 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
22 changes: 21 additions & 1 deletion frontend/src/models/dashboardItemsModel.tsx
Original file line number Diff line number Diff line change
@@ -3,23 +3,34 @@ import { kea } from 'kea'
import api from 'lib/api'
import { prompt } from 'lib/logic/prompt'
import { toast } from 'react-toastify'
import { DashboardItemType } from '~/types'
import { DashboardItemMode, DashboardItemType } from '~/types'
import { dashboardsModel } from './dashboardsModel'
import { Link } from 'lib/components/Link'
import { dashboardItemsModelType } from '~/models/dashboardItemsModelType'
import { insightLogic } from 'scenes/insights/insightLogic'

export const dashboardItemsModel = kea<dashboardItemsModelType<DashboardItemType>>({
actions: () => ({
renameDashboardItem: (item: DashboardItemType) => ({ item }),
renameDashboardItemSuccess: (item: DashboardItemType) => ({ item }),
updateDashboardItem: (id: number, payload: any) => ({ id, ...payload }),
liyiy marked this conversation as resolved.
Show resolved Hide resolved
duplicateDashboardItem: (item: DashboardItemType, dashboardId?: number, move: boolean = false) => ({
item,
dashboardId,
move,
}),
setDashboardItemMode: (mode: DashboardItemMode) => ({ mode }),
duplicateDashboardItemSuccess: (item: DashboardItemType) => ({ item }),
refreshAllDashboardItems: (filters: Record<string, any>) => filters,
}),
reducers: () => ({
dashboardItemMode: [
null,
liyiy marked this conversation as resolved.
Show resolved Hide resolved
{
setDashboardItemMode: (_, { mode }) => mode,
},
],
}),
listeners: ({ actions }) => ({
renameDashboardItem: async ({ item }) => {
prompt({ key: `rename-dashboard-item-${item.id}` }).actions.prompt({
@@ -34,6 +45,15 @@ export const dashboardItemsModel = kea<dashboardItemsModelType<DashboardItemType
},
})
},
updateDashboardItem: async ({ id, ...payload }) => {
if (!Object.entries(payload).length) {
return
}
const response = await api.update(`api/dashboard_item/${id}`, payload)
actions.setDashboardItemMode(null)
insightLogic.actions.setDashboardItem(response)
return response
liyiy marked this conversation as resolved.
Show resolved Hide resolved
},
duplicateDashboardItem: async ({ item, dashboardId, move }) => {
if (!item) {
return
21 changes: 0 additions & 21 deletions frontend/src/scenes/dashboard/Dashboard.scss
Original file line number Diff line number Diff line change
@@ -201,24 +201,3 @@ $dashboard-title-size: 32px;
}
}

.dashboard-item-header {
padding-top: $default_spacing * 2;
padding-bottom: $default_spacing;

.dashboard-item-description {
padding-top: $default_spacing;
padding-bottom: $default_spacing;
padding-left: 9px;
background: white;

.title {
display: flex;
align-items: center;
svg {
color: $warning;
font-size: 18px;
margin-right: 6px;
}
}
}
}
2 changes: 1 addition & 1 deletion frontend/src/scenes/dashboard/DashboardHeader.tsx
Original file line number Diff line number Diff line change
@@ -234,7 +234,7 @@ export function DashboardHeader(): JSX.Element {
</>
)}
</div>
{user?.organization?.available_features?.includes('dashboard_collaboration') && (
{true && (
<>
<div className="mb" data-attr="dashboard-tags">
<ObjectTags
41 changes: 41 additions & 0 deletions frontend/src/scenes/dashboard/DashboardItem.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
@import '~/vars';

.dashboard-item-header {
padding-top: $default_spacing * 2;
padding-bottom: 12px;

.header-container {
display: flex;
justify-content: space-between;
padding-top: $default_spacing;
padding-bottom: $default_spacing;
padding-left: 9px;
background: white;

.title-description {
flex-direction: column;
width: 100%;
svg {
color: $warning;
font-size: 18px;
margin-right: 6px;
}
}

.save-btn {
svg {
color: white;
}
}
}
.description {
.description-box {
padding-left: $default_spacing * 2;
padding-top: 6px;
}

.edit-box {
padding-top: $default_spacing;
}
}
}
84 changes: 73 additions & 11 deletions frontend/src/scenes/dashboard/DashboardItemHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import React from 'react'
import React, { useState } from 'react'
import { Link } from 'lib/components/Link'
import { PageHeader } from 'lib/components/PageHeader'
import { ArrowLeftOutlined } from '@ant-design/icons'
import { ArrowLeftOutlined, EditOutlined, SaveOutlined } from '@ant-design/icons'
import { IconDashboard } from 'lib/components/icons'
import { useValues } from 'kea'
import { useActions, useValues } from 'kea'
import { dashboardLogic } from './dashboardLogic'
import './Dashboard.scss'
import { insightLogic } from 'scenes/insights/insightLogic'
import { userLogic } from 'scenes/userLogic'
import { dashboardItemsModel } from '~/models/dashboardItemsModel'
import { Button, Input } from 'antd'
import { DashboardItemMode } from '../../types'
import './DashboardItem.scss'

interface Props {
dashboardId: number
@@ -15,22 +19,80 @@ interface Props {
export function DashboardItemHeader({ dashboardId }: Props): JSX.Element {
const { dashboard } = useValues(dashboardLogic({ id: dashboardId }))
const { dashboardItem } = useValues(insightLogic)
const { dashboardItemMode } = useValues(dashboardItemsModel)
const { setDashboardItemMode, updateDashboardItem } = useActions(dashboardItemsModel)
const [newDescription, setNewDescription] = useState(dashboardItem.description) // Used to update the input immediately, debouncing API calls
const { user } = useValues(userLogic)
const isDashboardItemEditMode = dashboardItemMode === DashboardItemMode.Edit
const hasDashboardCollab = user?.organization?.available_features?.includes('dashboard_collaboration')

return (
<div className="dashboard-item-header">
<Link to={`/dashboard/${dashboardId}`}>
<ArrowLeftOutlined /> To {dashboard?.name} dashboard
</Link>

<div style={{ marginTop: -16 }}>
<PageHeader title={dashboardItem?.name} />
<div className="dashboard-item-description text-default">
<div className="title">
<IconDashboard />
<span style={{ paddingLeft: 6 }}>
Viewing graph <b>{dashboardItem?.name}</b> from{' '}
<Link to={`/dashboard/${dashboardId}`}>{dashboard?.name}</Link> dashboard.
</span>

<div className="header-container text-default">
<div className="title-description">
<div style={{ display: 'flex' }}>
{isDashboardItemEditMode ? <EditOutlined /> : <IconDashboard />}
<span style={{ paddingLeft: 6 }}>
{isDashboardItemEditMode ? 'Editing graph' : 'Viewing graph'}{' '}
<b>{dashboardItem?.name}</b> from{' '}
<Link to={`/dashboard/${dashboardId}`}>{dashboard?.name}</Link> dashboard.
</span>
</div>

{hasDashboardCollab && (
<>
<div className="description">
{isDashboardItemEditMode ? (
<div className="edit-box">
<Input.TextArea
placeholder="Add a description to your dashboard item"
value={newDescription}
onChange={(e) => {
setNewDescription(e.target.value)
}}
/>
</div>
) : (
<div className="description-box text-small text-muted">
{dashboardItem.description ? (
<span>{dashboardItem.description}</span>
) : (
<span className="add-description">Add a description...</span>
)}
</div>
)}
</div>
</>
)}
</div>

{hasDashboardCollab &&
(isDashboardItemEditMode ? (
<Button
style={{ marginRight: 16 }}
icon={<SaveOutlined />}
onClick={() => updateDashboardItem(dashboardItem.id, { description: newDescription })}
type="primary"
data-attr="dashboard-item-description-submit"
>
Save changes
</Button>
) : (
<Button
style={{ marginRight: 16 }}
onClick={() => setDashboardItemMode(DashboardItemMode.Edit)}
>
<EditOutlined />
Edit name or description
</Button>
))}
</div>
</div>
</div>
4 changes: 4 additions & 0 deletions frontend/src/types.ts
Original file line number Diff line number Diff line change
@@ -665,6 +665,10 @@ export enum DashboardMode { // Default mode is null
Public = 'public', // When viewing the dashboard publicly via a shareToken
}

export enum DashboardItemMode {
Edit = 'edit',
}

// Reserved hotkeys globally available
export type GlobalHotKeys = 'g'