feat(ui) - dashboard - report

frontend/app/components/Client/CustomFields/CustomFields.js

@@ -100,7 +100,7 @@ class CustomFields extends React.Component {
             title="No data available."
             size="small"
             show={ fields.size === 0 }
-            icon
+            animatedIcon="empty-state"
           >
             <div className={ styles.list }>
               { fields.filter(i => i.index).map(field => (

frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx

@@ -47,6 +47,19 @@ function DashboardEditModal(props: Props) {
                         value={ dashboard.name }
                         onChange={write}
                         placeholder="Title"
+                        maxLength={100}
+                    />
+                </Form.Field>
+
+                <Form.Field>
+                    <label>{'Description:'}</label>
+                    <input
+                        className=""
+                        name="description"
+                        value={ dashboard.description }
+                        onChange={write}
+                        placeholder="Description"
+                        maxLength={300}
                     />
                 </Form.Field>
 

frontend/app/components/Dashboard/components/DashboardForm/DashboardForm.tsx

@@ -21,7 +21,7 @@ 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} />
+                <Input type="text" name="name" onChange={write} value={dashboard.name} maxLength={100} />
             </div>
 
             <div className="form-field flex flex-col">

frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx

@@ -86,8 +86,15 @@ function DashboardView(props: Props) {
                     />
                     <div className="flex items-center mb-4 justify-between">
                         <div className="flex items-center">
-                            <PageTitle title={dashboard?.name} className="mr-3" />
-                            <Button primary size="small" onClick={onAddWidgets}>Add Metric</Button>
+                            <PageTitle
+                                title={dashboard?.name}
+                                className="mr-3"
+                                subTitle={dashboard?.description}
+                                actionButton={
+                                    <Button primary size="small" onClick={onAddWidgets}>Add Metric</Button>
+                                }
+                            />
+                            
                         </div>
                         <div className="flex items-center">
                             <div className="flex items-center">

frontend/app/components/hocs/withReport.tsx

@@ -138,6 +138,7 @@ export default function withReport<P extends Props>(
                             {period && (period.range.start.format('MMM Do YY') + ' - ' + period.range.end.format('MMM Do YY'))}
                         </div>
                     </div>
+                    {dashboard && dashboard.description && <div className="color-gray-medum whitespace-pre-wrap my-2">{dashboard.description}</div>}
                 </div>
 
                 <div

frontend/app/components/ui/PageTitle/PageTitle.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import cn from 'classnames';    
 
-function PageTitle({ title, className = '' }) {
+function PageTitle({ title, actionButton = null, subTitle = '', className = '', subTitleClass }) {
     return (
-        <h1 className={cn("text-2xl", className)}>
-            {title}
-        </h1>
+        <div>
+            <div className='flex items-center'>
+                <h1 className={cn("text-2xl", className)}>
+                    {title}
+                </h1>
+                { actionButton && actionButton}
+            </div>
+            {subTitle && <h2 className={cn("my-1 font-normal color-gray-dark", subTitleClass)}>{subTitle}</h2>}
+        </div>
     );
 }
 

frontend/app/mstore/types/dashboard.ts

@@ -6,6 +6,7 @@ import { toast } from 'react-toastify';
 export interface IDashboard {
     dashboardId: any
     name: string
+    description: string
     isPublic: boolean
     widgets: IWidget[]
     metrics: any[]
@@ -35,6 +36,7 @@ export default class Dashboard implements IDashboard {
     public static get ID_KEY():string { return "dashboardId" }
     dashboardId: any = undefined
     name: string = "New Dashboard"
+    description: string = ""
     isPublic: boolean = true
     widgets: IWidget[] = []
     metrics: any[] = []
@@ -46,6 +48,7 @@ export default class Dashboard implements IDashboard {
     constructor() {
         makeAutoObservable(this, {
             name: observable,
+            description: observable,
             isPublic: observable,
             widgets: observable,
             isValid: observable,