From a38d5ade6b5fd56510c9ef2c3aaca29176687b94 Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Thu, 26 Sep 2024 13:24:18 +0100
Subject: [PATCH] Move data samples menu to the top

---
 src/components/DataSampleGridView.tsx |  8 +++--
 src/components/DataSamplesMenu.tsx    | 49 +++++++++++++++++++++++++
 src/components/HeadingGrid.tsx        | 31 +++++++++-------
 src/pages/DataSamplesPage.tsx         | 52 ++-------------------------
 4 files changed, 75 insertions(+), 65 deletions(-)
 create mode 100644 src/components/DataSamplesMenu.tsx

diff --git a/src/components/DataSampleGridView.tsx b/src/components/DataSampleGridView.tsx
index 67d1e3446..55139ca9e 100644
--- a/src/components/DataSampleGridView.tsx
+++ b/src/components/DataSampleGridView.tsx
@@ -3,19 +3,20 @@ import { ButtonEvent } from "@microbit/microbit-connection";
 import { useEffect, useMemo, useState } from "react";
 import { useConnectActions } from "../connect-actions-hooks";
 import DataSampleGridRow from "./AddDataGridRow";
-import HeadingGrid from "./HeadingGrid";
+import HeadingGrid, { GridColumnHeadingItemProps } from "./HeadingGrid";
 import RecordingDialog from "./RecordingDialog";
 import { useStore } from "../store";
+import DataSamplesMenu from "./DataSamplesMenu";
 
 const gridCommonProps: Partial<GridProps> = {
   gridTemplateColumns: "290px 1fr",
   gap: 3,
   px: 10,
-  py: 2,
+  mb: 2,
   w: "100%",
 };
 
-const headings = [
+const headings: GridColumnHeadingItemProps[] = [
   {
     titleId: "content.data.classification",
     descriptionId: "content.data.classHelpBody",
@@ -23,6 +24,7 @@ const headings = [
   {
     titleId: "content.data.data",
     descriptionId: "content.data.dataDescription",
+    itemsRight: <DataSamplesMenu />,
   },
 ];
 
diff --git a/src/components/DataSamplesMenu.tsx b/src/components/DataSamplesMenu.tsx
new file mode 100644
index 000000000..2ff2086b1
--- /dev/null
+++ b/src/components/DataSamplesMenu.tsx
@@ -0,0 +1,49 @@
+import {
+  Icon,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+} from "@chakra-ui/react";
+import { MdMoreVert } from "react-icons/md";
+import { FormattedMessage, useIntl } from "react-intl";
+import LoadProjectMenuItem from "./LoadProjectMenuItem";
+import {
+  RiDeleteBin2Line,
+  RiDownload2Line,
+  RiUpload2Line,
+} from "react-icons/ri";
+import { useStore } from "../store";
+
+const DataSamplesMenu = () => {
+  const intl = useIntl();
+  const downloadDataSet = useStore((s) => s.downloadDataset);
+  const deleteAllGestures = useStore((s) => s.deleteAllGestures);
+  return (
+    <Menu>
+      <MenuButton
+        as={IconButton}
+        aria-label={intl.formatMessage({
+          id: "content.data.controlbar.button.menu",
+        })}
+        variant="ghost"
+        icon={<Icon as={MdMoreVert} boxSize={10} color="brand.500" />}
+        isRound
+      />
+      <MenuList>
+        <LoadProjectMenuItem icon={<RiUpload2Line />} accept=".json">
+          <FormattedMessage id="content.data.controlbar.button.uploadData" />
+        </LoadProjectMenuItem>
+        <MenuItem icon={<RiDownload2Line />} onClick={downloadDataSet}>
+          <FormattedMessage id="content.data.controlbar.button.downloadData" />
+        </MenuItem>
+        <MenuItem icon={<RiDeleteBin2Line />} onClick={deleteAllGestures}>
+          <FormattedMessage id="content.data.controlbar.button.clearData" />
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default DataSamplesMenu;
diff --git a/src/components/HeadingGrid.tsx b/src/components/HeadingGrid.tsx
index bb08e7520..eceb23f80 100644
--- a/src/components/HeadingGrid.tsx
+++ b/src/components/HeadingGrid.tsx
@@ -1,11 +1,7 @@
 import { Grid, GridItem, GridProps, HStack, Text } from "@chakra-ui/react";
 import { FormattedMessage } from "react-intl";
 import InfoToolTip from "./InfoToolTip";
-
-interface GridColumnHeadingItemProps {
-  titleId?: string;
-  descriptionId?: string;
-}
+import { ReactNode } from "react";
 
 interface HeadingGridProps extends GridProps {
   headings: GridColumnHeadingItemProps[];
@@ -28,18 +24,27 @@ const HeadingGrid = ({ headings, ...props }: HeadingGridProps) => {
   );
 };
 
+export interface GridColumnHeadingItemProps {
+  titleId?: string;
+  descriptionId?: string;
+  itemsRight?: ReactNode;
+}
+
 const GridColumnHeadingItem = (props: GridColumnHeadingItemProps) => {
   return (
     <GridItem>
       {props.titleId && props.descriptionId && (
-        <HStack opacity={0.7}>
-          <Text>
-            <FormattedMessage id={props.titleId} />
-          </Text>
-          <InfoToolTip
-            titleId={props.titleId}
-            descriptionId={props.descriptionId}
-          ></InfoToolTip>
+        <HStack justifyContent="space-between">
+          <HStack opacity={0.7}>
+            <Text>
+              <FormattedMessage id={props.titleId} />
+            </Text>
+            <InfoToolTip
+              titleId={props.titleId}
+              descriptionId={props.descriptionId}
+            ></InfoToolTip>
+          </HStack>
+          {props.itemsRight}
         </HStack>
       )}
     </GridItem>
diff --git a/src/pages/DataSamplesPage.tsx b/src/pages/DataSamplesPage.tsx
index bfbcba0a4..31d93dd40 100644
--- a/src/pages/DataSamplesPage.tsx
+++ b/src/pages/DataSamplesPage.tsx
@@ -1,30 +1,12 @@
-import {
-  Button,
-  HStack,
-  Icon,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  VStack,
-} from "@chakra-ui/react";
+import { Button, HStack, VStack } from "@chakra-ui/react";
 import { useCallback } from "react";
-import { MdMoreVert } from "react-icons/md";
-import {
-  RiAddLine,
-  RiArrowRightLine,
-  RiDeleteBin2Line,
-  RiDownload2Line,
-  RiUpload2Line,
-} from "react-icons/ri";
-import { FormattedMessage, useIntl } from "react-intl";
+import { RiAddLine, RiArrowRightLine } from "react-icons/ri";
+import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router";
 import ConnectFirstView from "../components/ConnectFirstView";
 import DataSampleGridView from "../components/DataSampleGridView";
 import DefaultPageLayout from "../components/DefaultPageLayout";
 import LiveGraphPanel from "../components/LiveGraphPanel";
-import LoadProjectMenuItem from "../components/LoadProjectMenuItem";
 import { ConnectionStatus } from "../connect-status-hooks";
 import { useConnectionStage } from "../connection-stage-hooks";
 import { SessionPageId } from "../pages-config";
@@ -32,11 +14,8 @@ import { useHasSufficientDataForTraining, useStore } from "../store";
 import { createSessionPageUrl } from "../urls";
 
 const DataSamplesPage = () => {
-  const intl = useIntl();
   const gestures = useStore((s) => s.gestures);
   const addNewGesture = useStore((s) => s.addNewGesture);
-  const downloadDataSet = useStore((s) => s.downloadDataset);
-  const deleteAllGestures = useStore((s) => s.deleteAllGestures);
   const model = useStore((s) => s.model);
 
   const navigate = useNavigate();
@@ -89,31 +68,6 @@ const DataSamplesPage = () => {
             >
               <FormattedMessage id="content.data.addAction" />
             </Button>
-            <Menu>
-              <MenuButton
-                as={IconButton}
-                aria-label={intl.formatMessage({
-                  id: "content.data.controlbar.button.menu",
-                })}
-                variant="ghost"
-                icon={<Icon as={MdMoreVert} boxSize={10} color="brand.500" />}
-                isRound
-              />
-              <MenuList>
-                <LoadProjectMenuItem icon={<RiUpload2Line />} accept=".json">
-                  <FormattedMessage id="content.data.controlbar.button.uploadData" />
-                </LoadProjectMenuItem>
-                <MenuItem icon={<RiDownload2Line />} onClick={downloadDataSet}>
-                  <FormattedMessage id="content.data.controlbar.button.downloadData" />
-                </MenuItem>
-                <MenuItem
-                  icon={<RiDeleteBin2Line />}
-                  onClick={deleteAllGestures}
-                >
-                  <FormattedMessage id="content.data.controlbar.button.clearData" />
-                </MenuItem>
-              </MenuList>
-            </Menu>
           </HStack>
           {model ? (
             <Button