init update dashboard name

frontend/pages/dashboard/[dashboardId].js

@@ -8,6 +8,9 @@ import {
   Text,
   Spacer,
   IconButton,
+  Editable,
+  EditableInput,
+  EditablePreview,
 } from "@chakra-ui/react";
 import Scrollable from "../../src/components/Scrollable";
 import RangeSelector from "../../src/components/RangeSelector";
@@ -94,8 +97,12 @@ const Analytics = () => {
   const [timeRange, setTimeRange] = useState(timeMap[MINUTE_KEY]);
   const router = useRouter();
   const { dashboardId } = router.params;
-  const { dashboardCache, dashboardLinksCache, deleteDashboard } =
-    useDashboard(dashboardId);
+  const {
+    dashboardCache,
+    dashboardLinksCache,
+    deleteDashboard,
+    updateDashboard,
+  } = useDashboard(dashboardId);
 
   const { subscriptionsCache } = useSubscriptions();
 
@@ -145,6 +152,12 @@ const Analytics = () => {
   //     }
   //   }, [nodesReady, windowSize]);
 
+  const updateCallback = ({ name }) => {
+    const dashboard = { ...dashboardCache.data.data.resource_data };
+    dashboard.name = name;
+    updateDashboard.mutate({ id: dashboardCache.data.data.id, dashboard });
+  };
+
   if (
     dashboardCache.isLoading ||
     dashboardLinksCache.isLoading ||
@@ -166,16 +179,28 @@ const Analytics = () => {
         minH="100vh"
       >
         <Stack direction={["column", "row", null]} w="100%" placeItems="center">
-          <Heading as="h1" py={2} fontSize={["md", "xl"]}>
-            {dashboardCache.data.data.resource_data.name}
-            <IconButton
-              icon={<BiTrash />}
-              variant="ghost"
-              colorScheme="red"
-              size="sm"
-              onClick={() => toggleAlert(() => deleteDashboard.mutate())}
-            />
-          </Heading>
+          <Editable
+            as={Heading}
+            colorScheme="blue"
+            placeholder="enter note here"
+            defaultValue={dashboardCache.data.data.resource_data.name}
+            onSubmit={(nextValue) =>
+              updateCallback({
+                name: nextValue,
+              })
+            }
+          >
+            <EditablePreview maxW="40rem" _placeholder={{ color: "black" }} />
+            <EditableInput maxW="40rem" />
+          </Editable>
+          <Heading as="h1" py={2} fontSize={["md", "xl"]}></Heading>
+          <IconButton
+            icon={<BiTrash />}
+            variant="ghost"
+            colorScheme="red"
+            size="sm"
+            onClick={() => toggleAlert(() => deleteDashboard.mutate())}
+          />
           <Spacer />
           <RangeSelector
             initialRange={MINUTE_KEY}

frontend/src/components/SubscriptionsList.js

@@ -10,8 +10,8 @@ import {
   Tooltip,
   Editable,
   EditableInput,
-  Image,
   EditablePreview,
+  Image,
   Button,
 } from "@chakra-ui/react";
 import { CheckIcon, DeleteIcon } from "@chakra-ui/icons";

frontend/src/core/hooks/useDashboard.js

@@ -34,6 +34,18 @@ const useDashboard = (dashboardId) => {
     },
   });
 
+  const updateDashboard = useMutation(DashboardService.updateDashboard, {
+    onSuccess: () => {
+      toast("Updated new dashboard", "success");
+    },
+    onError: (error) => {
+      toast(error.error, "error", "Fail");
+    },
+    onSettled: () => {
+      dashboardsListCache.refetch();
+    },
+  });
+
   const deleteDashboard = useMutation(
     () => DashboardService.deleteDashboard(dashboardId),
     {
@@ -80,6 +92,7 @@ const useDashboard = (dashboardId) => {
     dashboardCache,
     deleteDashboard,
     dashboardLinksCache,
+    updateDashboard,
   };
 };
 

frontend/src/core/services/dashboard.service.js

@@ -1,3 +1,4 @@
+import { identify } from "mixpanel-browser";
 import { http } from "../utils";
 
 const API_URL = process.env.NEXT_PUBLIC_MOONSTREAM_API_URL;
@@ -10,6 +11,18 @@ export const createDashboard = (data) => {
   });
 };
 
+export const updateDashboard = ({ dashboard, id }) => {
+  return http({
+    method: "PUT",
+    url: `${API_URL}/dashboards/${id}`,
+    data: {
+      ...dashboard,
+      dashboard_id: id,
+      subscriptions: dashboard.dashboard_subscriptions,
+    },
+  });
+};
+
 export const getDashboardsList = () => {
   return http({
     method: "GET",