From 01dac68214b7158bf4907d100c9b44e890e0732e Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Thu, 27 Jun 2024 13:43:33 +0530
Subject: [PATCH] revised dashboard widget header

---
 .../WidgetView/WidgetViewHeader.tsx           | 75 ++++++++++---------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
index e32246b8f..49a22e3a1 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
@@ -1,47 +1,48 @@
 import React from 'react';
-import cn from 'classnames';
-import WidgetName from 'Components/Dashboard/components/WidgetName';
-import { useStore } from 'App/mstore';
-import { useObserver } from 'mobx-react-lite';
-import AddToDashboardButton from 'Components/Dashboard/components/AddToDashboardButton';
-import WidgetDateRange from 'Components/Dashboard/components/WidgetDateRange/WidgetDateRange';
-import { Button, Space } from 'antd';
-import CardViewMenu from 'Components/Dashboard/components/WidgetView/CardViewMenu';
+import cn from "classnames";
+import WidgetName from "Components/Dashboard/components/WidgetName";
+import {useStore} from "App/mstore";
+import {useObserver} from "mobx-react-lite";
+import AddToDashboardButton from "Components/Dashboard/components/AddToDashboardButton";
+import WidgetDateRange from "Components/Dashboard/components/WidgetDateRange/WidgetDateRange";
+import {Button, Space} from "antd";
+import CardViewMenu from "Components/Dashboard/components/WidgetView/CardViewMenu";
 
 interface Props {
-  onClick?: () => void;
-  onSave: () => void;
-  undoChanges?: () => void;
+    onClick?: () => void;
+    onSave: () => void;
+    undoChanges?: () => void;
 }
 
-function WidgetViewHeader({ onClick, onSave, undoChanges }: Props) {
-  const { metricStore, dashboardStore } = useStore();
-  const widget = useObserver(() => metricStore.instance);
+function WidgetViewHeader({onClick, onSave, undoChanges}: Props) {
+    const {metricStore, dashboardStore} = useStore();
+    const widget = useObserver(() => metricStore.instance);
 
-  return (
-    <div className={cn('flex justify-between items-center')} onClick={onClick}>
-      <h1 className="mb-0 text-2xl mr-4 min-w-fit">
-        <WidgetName
-          name={widget.name}
-          onUpdate={(name) => metricStore.merge({ name })}
-          canEdit={true}
-        />
-      </h1>
-      <Space>
-        <WidgetDateRange label="" />
-        <AddToDashboardButton metricId={widget.metricId} />
-        <Button
-          type="primary"
-          onClick={onSave}
-          loading={metricStore.isSaving}
-          disabled={metricStore.isSaving || !widget.hasChanged}
+    return (
+        <div
+            className={cn('flex justify-between items-center')}
+            onClick={onClick}
         >
-          {metricStore.isSaving ? 'Saving...' : 'Update'}
-        </Button>
-        <CardViewMenu />
-      </Space>
-    </div>
-  );
+            <h1 className="mb-0 text-2xl mr-4 min-w-fit">
+                <WidgetName name={widget.name}
+                            onUpdate={(name) => metricStore.merge({name})}
+                            canEdit={true}/>
+            </h1>
+            <Space>
+                <WidgetDateRange label=""/>
+                <AddToDashboardButton metricId={widget.metricId}/>
+                <Button
+                    type="primary"
+                    onClick={onSave}
+                    loading={metricStore.isSaving}
+                    disabled={metricStore.isSaving || !widget.hasChanged}
+                >
+                    Update
+                </Button>
+                <CardViewMenu/>
+            </Space>
+        </div>
+    );
 }
 
 export default WidgetViewHeader;