jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix dashboard pinning and state updating; fix menu items naming

Browse source
This commit is contained in:
sylenien 2022-05-17 15:15:19 +02:00 • committed by Delirium
parent 9960927ca0
commit 25f792edc2
7 changed files with 39 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx
View file

@ -7,9 +7,10 @@ interface Props {
show: boolean;
// dashboard: any;
closeHandler?: () => void;
focusTitle?: boolean;
}
function DashboardEditModal(props: Props) {
const { show, closeHandler } = props;
const { show, closeHandler, focusTitle } = props;
const { dashboardStore } = useStore();
const dashboard = useObserver(() => dashboardStore.dashboardInstance);
@ -26,7 +27,7 @@ function DashboardEditModal(props: Props) {
<Modal size="tiny" open={ show }>
<Modal.Header className="flex items-center justify-between">
<div>{ 'Edit Dashboard' }</div>
<Icon
<Icon
role="button"
tabIndex="-1"
color="gray-dark"
@ -41,13 +42,13 @@ function DashboardEditModal(props: Props) {
<Form.Field>
<label>{'Title:'}</label>
<input
autoFocus={ true }
className=""
name="name"
value={ dashboard.name }
onChange={write}
placeholder="Title"
maxLength={100}
autoFocus={focusTitle}
/>
</Form.Field>
@ -60,6 +61,7 @@ function DashboardEditModal(props: Props) {
onChange={write}
placeholder="Description"
maxLength={300}
autoFocus={!dashboard.description || !focusTitle}
/>
</Form.Field>
@ -96,4 +98,4 @@ function DashboardEditModal(props: Props) {
));
}
export default DashboardEditModal;
export default DashboardEditModal;

10
frontend/app/components/Dashboard/components/DashboardForm/DashboardForm.tsx
View file

@ -11,7 +11,7 @@ interface Props {
function DashboardForm(props: Props) {
const { dashboardStore } = useStore();
const dashboard = dashboardStore.dashboardInstance;
const write = ({ target: { value, name } }) => dashboard.update({ [ name ]: value })
const writeRadio = ({ target: { value, name } }) => {
dashboard.update({ [name]: value === 'team' });
@ -21,12 +21,12 @@ function DashboardForm(props: Props) {
<div className="mb-8 grid grid-cols-2 gap-8">
<div className="form-field flex flex-col">
<label htmlFor="name" className="font-medium mb-2">Title</label>
<Input type="text" name="name" onChange={write} value={dashboard.name} maxLength={100} />
<Input type="text" autoFocus name="name" onChange={write} value={dashboard.name} maxLength={100} />
</div>
<div className="form-field flex flex-col">
<label htmlFor="name" className="font-medium mb-2">Visibility and Editing</label>
<div className="flex items-center py-2">
<label className="inline-flex items-center mr-6">
<input
@ -35,7 +35,7 @@ function DashboardForm(props: Props) {
name="isPublic"
value="team"
checked={dashboard.isPublic}
onChange={writeRadio}
onChange={writeRadio}
/>
<span className={cn("ml-2", { 'color-teal' : dashboard.isPublic})}>Team</span>
</label>
@ -57,4 +57,4 @@ function DashboardForm(props: Props) {
));
}
export default DashboardForm;
export default DashboardForm;

15
frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx
View file

@ -3,16 +3,17 @@ import { ItemMenu } from 'UI';
import { connect } from 'react-redux';
interface Props {
editHandler: any
deleteHandler: any
renderReport: any
isEnterprise: boolean
editHandler: (isTitle: boolean) => void;
deleteHandler: any;
renderReport: any;
isEnterprise: boolean;
isTitlePresent?: boolean;
}
function DashboardOptions(props: Props) {
const { editHandler, deleteHandler, renderReport, isEnterprise } = props;
const { editHandler, deleteHandler, renderReport, isEnterprise, isTitlePresent } = props;
const menuItems = [
{ icon: 'pencil', text: 'Rename', onClick: editHandler },
{ icon: 'text-paragraph', text: 'Add Description', onClick: editHandler },
{ icon: 'pencil', text: 'Rename', onClick: () => editHandler(true) },
{ icon: 'text-paragraph', text: `${!isTitlePresent ? 'Add' : 'Edit'} Description`, onClick: () => editHandler(false) },
{ icon: 'users', text: 'Visibility & Access', onClick: editHandler },
{ icon: 'trash', text: 'Delete', onClick: deleteHandler },
]

7
frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
View file

@ -46,7 +46,8 @@ function DashboardSideMenu(props: RouteComponentProps<Props>) {
showModal(<DashboardModal siteId={siteId} />, { right: true })
}
const togglePinned = (dashboard) => {
const togglePinned = (dashboard, e) => {
e.stopPropagation();
dashboardStore.updatePinned(dashboard.dashboardId);
}
@ -66,7 +67,7 @@ function DashboardSideMenu(props: RouteComponentProps<Props>) {
</span>
}
/>
{dashboardsPicked.sort((a: any, b: any) => a.isPinned === b.isPinned ? 0 : a.isPinned ? -1 : 1 ).map((item: any) => (
{dashboardsPicked.map((item: any) => (
<SideMenuitem
key={ item.dashboardId }
active={item.dashboardId === dashboardId && !isMetric}
@ -87,7 +88,7 @@ function DashboardSideMenu(props: RouteComponentProps<Props>) {
>
<div
className={cn("p-1 invisible group-hover:visible cursor-pointer")}
onClick={() => togglePinned(item)}
onClick={(e) => togglePinned(item, e)}
>
<Icon name="pin-fill" size="16" color="gray-light" />
</div>

10
frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
View file

@ -33,6 +33,7 @@ function DashboardView(props: Props) {
const dashboard: any = dashboardStore.selectedDashboard;
const period = dashboardStore.period;
const [showEditModal, setShowEditModal] = React.useState(false);
const [focusTitle, setFocusedInput] = React.useState(true);
useEffect(() => {
if (!dashboard || !dashboard.dashboardId) return;
@ -49,8 +50,9 @@ function DashboardView(props: Props) {
showModal(<DashboardModal siteId={siteId} dashboardId={dashboardId} />, { right: true })
}
const onEdit = () => {
const onEdit = (isTitle) => {
dashboardStore.initDashboard(dashboard)
setFocusedInput(isTitle);
setShowEditModal(true)
}
@ -86,9 +88,10 @@ function DashboardView(props: Props) {
<DashboardEditModal
show={showEditModal}
closeHandler={() => setShowEditModal(false)}
focusTitle={focusTitle}
/>
<div className="flex items-center mb-4 justify-between">
<div className="flex items-center">
<div className="flex items-center" style={{ flex: 4 }}>
<PageTitle
title={dashboard?.name}
className="mr-3"
@ -99,7 +102,7 @@ function DashboardView(props: Props) {
/>
</div>
<div className="flex items-center">
<div className="flex items-center" style={{ flex: 1, justifyContent: 'end' }}>
<div className="flex items-center">
{/* <span className="mr-2 color-gray-medium">Time Range</span> */}
<DateRange
@ -117,6 +120,7 @@ function DashboardView(props: Props) {
editHandler={onEdit}
deleteHandler={onDelete}
renderReport={props.renderReport}
isTitlePresent={!!dashboard?.description}
/>
</div>
</div>

6
frontend/app/components/ui/PageTitle/PageTitle.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import cn from 'classnames';
import cn from 'classnames';
function PageTitle({ title, actionButton = null, subTitle = '', className = '', subTitleClass }) {
return (
@ -10,9 +10,9 @@ function PageTitle({ title, actionButton = null, subTitle = '', className = '',
</h1>
{ actionButton && actionButton}
</div>
{subTitle && <h2 className={cn("my-1 font-normal color-gray-dark", subTitleClass)}>{subTitle}</h2>}
{subTitle && <h2 className={cn("my-4 font-normal color-gray-dark", subTitleClass)}>{subTitle}</h2>}
</div>
);
}
export default PageTitle;
export default PageTitle;

6
frontend/app/mstore/dashboardStore.ts
View file

@ -99,8 +99,10 @@ export default class DashboardStore implements IDashboardSotre {
constructor() {
makeAutoObservable(this, {
dashboards: observable.ref,
drillDownFilter: observable.ref,
widgetCategories: observable.ref,
selectedDashboard: observable.ref,
resetCurrentWidget: action,
addDashboard: action,
removeDashboard: action,
@ -115,6 +117,7 @@ export default class DashboardStore implements IDashboardSotre {
setSiteId: action,
editWidget: action,
updateKey: action,
save: action,
selectWidgetsByCategory: action,
toggleAllSelectedWidgets: action,
@ -318,6 +321,9 @@ export default class DashboardStore implements IDashboardSotre {
const index = this.dashboards.findIndex(d => d.dashboardId === dashboard.dashboardId)
if (index >= 0) {
this.dashboards[index] = dashboard
if (this.selectedDashboard?.dashboardId === dashboard.dashboardId) {
this.selectDashboardById(dashboard.dashboardId)
}
}
}