From 25f792edc2e2c47498f0d1b81219e71f22d8b99e Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 17 May 2022 15:15:19 +0200
Subject: [PATCH] fix(ui): fix dashboard pinning and state updating; fix menu
 items naming

---
 .../DashboardEditModal/DashboardEditModal.tsx     | 10 ++++++----
 .../components/DashboardForm/DashboardForm.tsx    | 10 +++++-----
 .../DashboardOptions/DashboardOptions.tsx         | 15 ++++++++-------
 .../DashboardSideMenu/DashboardSideMenu.tsx       |  7 ++++---
 .../components/DashboardView/DashboardView.tsx    | 10 +++++++---
 .../app/components/ui/PageTitle/PageTitle.tsx     |  6 +++---
 frontend/app/mstore/dashboardStore.ts             |  6 ++++++
 7 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx b/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx
index 0f687a166..00cac08f9 100644
--- a/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx
@@ -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;
\ No newline at end of file
+export default DashboardEditModal;
diff --git a/frontend/app/components/Dashboard/components/DashboardForm/DashboardForm.tsx b/frontend/app/components/Dashboard/components/DashboardForm/DashboardForm.tsx
index 9e7bd54f6..f4f9fa258 100644
--- a/frontend/app/components/Dashboard/components/DashboardForm/DashboardForm.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardForm/DashboardForm.tsx
@@ -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;
\ No newline at end of file
+export default DashboardForm;
diff --git a/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx b/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx
index 08e5f88f4..ea3e498e2 100644
--- a/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx
@@ -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 },
     ]
diff --git a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
index a2a582a76..339af5565 100644
--- a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
@@ -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>
diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index c3502f7eb..17571d57c 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@@ -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>
diff --git a/frontend/app/components/ui/PageTitle/PageTitle.tsx b/frontend/app/components/ui/PageTitle/PageTitle.tsx
index 5bef94e3f..b61fc053f 100644
--- a/frontend/app/components/ui/PageTitle/PageTitle.tsx
+++ b/frontend/app/components/ui/PageTitle/PageTitle.tsx
@@ -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;
\ No newline at end of file
+export default PageTitle;
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index de61cacd3..fb76af79b 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -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)
+            }
         }
     }