Non-connect scenarios (#331)

Tweak action enablement and placeholder screen to allow use of actions when the tool isn't connected.
This will help in import scenarios and allow some initial exploration without a micro:bit.

We still think there's a gap in basic introduction prior to the connect flow but will review separately.

---------

Co-authored-by: Grace <grace@microbit.org>
Co-authored-by: Grace <145345672+microbit-grace@users.noreply.github.com>

Author: microbit-matt-hillsdon

lang/ui.en.json

@@ -119,6 +119,18 @@
     "defaultMessage": "WebUSB connection dialog with BBC micro:bit entry labelled 1 and Connect button labelled 2",
     "description": "Alt text for image in connect help dialog"
   },
+  "connect-or-import": {
+    "defaultMessage": "<link1>Connect a data collection micro:bit</link1> or <link2>import data samples</link2>",
+    "description": "Empty data samples page text"
+  },
+  "connect-to-record-body": {
+    "defaultMessage": "Connect a micro:bit to record a data sample.",
+    "description": "Insufficient data modal content"
+  },
+  "connect-to-record-title": {
+    "defaultMessage": "You don't have a micro:bit connected",
+    "description": "Connect to record modal title"
+  },
   "connectFailed.bluetooth1": {
     "defaultMessage": "The connection to the micro:bit could not be established.",
     "description": ""
@@ -859,6 +871,10 @@
     "defaultMessage": "More edit in MakeCode options",
     "description": "Aria label for the additional actions menu to the right of the Edit in MakeCode button"
   },
+  "no-data-samples": {
+    "defaultMessage": "No data samples",
+    "description": "Empty data samples page status text"
+  },
   "not-found": {
     "defaultMessage": "micro:bit AI creator home page",
     "description": "Page not found link text"

src/components/AddDataGridRow.tsx

@@ -11,15 +11,15 @@ interface AddDataGridRowProps {
   gesture: GestureData;
   selected: boolean;
   onSelectRow: () => void;
-  startRecording: () => void;
+  onRecord: () => void;
   showWalkThrough: boolean;
 }
 
 const DataSampleGridRow = ({
   gesture,
   selected,
   onSelectRow,
-  startRecording,
+  onRecord,
   showWalkThrough,
 }: AddDataGridRowProps) => {
   const intl = useIntl();
@@ -55,18 +55,15 @@ const DataSampleGridRow = ({
         readOnly={false}
       />
       {showWalkThrough ? (
-        <AddDataGridWalkThrough
-          gesture={gesture}
-          startRecording={startRecording}
-        />
+        <AddDataGridWalkThrough gesture={gesture} onRecord={onRecord} />
       ) : (
         <>
           {gesture.name.length > 0 || gesture.recordings.length > 0 ? (
             <DataRecordingGridItem
               data={gesture}
               selected={selected}
               onSelectRow={onSelectRow}
-              startRecording={startRecording}
+              onRecord={onRecord}
             />
           ) : (
             // Empty grid item to fill column space

src/components/AddDataGridWalkThrough.tsx

@@ -7,12 +7,12 @@ import UpCurveArrow from "./UpCurveArrow";
 
 interface AddDataGridWalkThrough {
   gesture: GestureData;
-  startRecording: () => void;
+  onRecord: () => void;
 }
 
 const AddDataGridWalkThrough = ({
   gesture,
-  startRecording,
+  onRecord,
 }: AddDataGridWalkThrough) => {
   return (
     <>
@@ -30,7 +30,7 @@ const AddDataGridWalkThrough = ({
           <DataRecordingGridItem
             data={gesture}
             selected={true}
-            startRecording={startRecording}
+            onRecord={onRecord}
           />
           {/* Empty grid item to fill first column of grid */}
           <GridItem />

src/components/ConnectFirstView.tsx

@@ -0,0 +1,58 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from "@chakra-ui/react";
+import { ComponentProps, useCallback } from "react";
+import { FormattedMessage } from "react-intl";
+import { useConnectionStage } from "../connection-stage-hooks";
+
+const ConnectToRecordDialog = ({
+  onClose,
+  ...rest
+}: Omit<ComponentProps<typeof Modal>, "children">) => {
+  const { actions } = useConnectionStage();
+
+  const handleConnect = useCallback(() => {
+    onClose();
+    actions.startConnect();
+  }, [actions, onClose]);
+
+  return (
+    <Modal
+      closeOnOverlayClick={false}
+      motionPreset="none"
+      size="md"
+      isCentered
+      onClose={onClose}
+      {...rest}
+    >
+      <ModalOverlay>
+        <ModalContent>
+          <ModalHeader>
+            <FormattedMessage id="connect-to-record-title" />
+          </ModalHeader>
+          <ModalBody>
+            <ModalCloseButton />
+            <Text>
+              <FormattedMessage id="connect-to-record-body" />
+            </Text>
+          </ModalBody>
+          <ModalFooter justifyContent="flex-end">
+            <Button variant="primary" onClick={handleConnect}>
+              <FormattedMessage id="footer.connectButton" />
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </ModalOverlay>
+    </Modal>
+  );
+};
+
+export default ConnectToRecordDialog;

src/components/ConnectToRecordDialog.tsx

@@ -20,14 +20,14 @@ interface DataRecordingGridItemProps {
   data: GestureData;
   selected: boolean;
   onSelectRow?: () => void;
-  startRecording: () => void;
+  onRecord: () => void;
 }
 
 const DataRecordingGridItem = ({
   data,
   selected,
   onSelectRow,
-  startRecording,
+  onRecord,
 }: DataRecordingGridItemProps) => {
   const intl = useIntl();
   const deleteGestureRecording = useStore((s) => s.deleteGestureRecording);
@@ -62,14 +62,14 @@ const DataRecordingGridItem = ({
                 height="fit-content"
                 width="fit-content"
                 rounded="full"
-                onClick={startRecording}
+                onClick={onRecord}
                 variant="ghost"
                 _hover={{ backgroundColor: "transparent" }}
                 aria-label={intl.formatMessage(
                   { id: "content.data.recordAction" },
                   { action: data.name }
                 )}
-                isDisabled={!isConnected}
+                opacity={isConnected ? 1 : 0.5}
                 icon={
                   <Icon
                     as={RecordIcon}