Linter errors

Author: glastonbridge

src/pages/ImportSharedURLPage.tsx

@@ -3,11 +3,11 @@ import {
   Grid,
   Heading,
   HStack,
-  HTMLChakraProps,
   Input,
   Stack,
   StackProps,
   Text,
+  TextProps,
   VStack,
 } from "@chakra-ui/react";
 import DefaultPageLayout, {
@@ -28,7 +28,7 @@ import {
 } from "@microbit/makecode-embed/vanilla";
 import { createDataSamplesPageUrl } from "../urls";
 import { useProject } from "../hooks/project-hooks";
-import { ActionData } from "../model";
+import { ActionData, DatasetEditorJsonFormat } from "../model";
 import DataSamplesTableRow from "../components/DataSamplesTableRow";
 import { MakeCodeRenderBlocksProvider } from "@microbit/makecode-embed";
 import { getMakeCodeLang } from "../settings";
@@ -57,7 +57,7 @@ const contentStackProps: Partial<StackProps> = {
   width: ["unset", "unset", "2xl", "80%"],
 };
 
-const readableProps: Partial<HTMLChakraProps<any>> = {
+const readableProps: Partial<TextProps> = {
   width: "65ch",
 };
 
@@ -103,7 +103,9 @@ export const ImportSharedURLPage = () => {
         setSharedState(SharedState.Complete);
         setProjectText(text);
         if (text["dataset.json"]) {
-          setDataset(JSON.parse(text["dataset.json"]).data);
+          setDataset(
+            (JSON.parse(text["dataset.json"]) as DatasetEditorJsonFormat).data
+          );
         }
       })
       .catch((e) => {
@@ -270,32 +272,43 @@ const PreviewData = ({ dataset }: PreviewDataProps) => {
       <Heading as="h1" mb={5}>
         <FormattedMessage id="import-shared-url-data-preview" />
       </Heading>
-      <Grid
-        gridTemplateColumns="290px 1fr"
-        gap={3}
+      <VStack
         px={5}
-        w="100%"
-        py={2}
-        alignItems="start"
-        autoRows="max-content"
-        overflow="auto"
+        w="full"
+        h={0}
+        justifyContent="start"
         flexGrow={1}
+        alignItems="start"
+        overflowX="auto"
+        flexShrink={1}
       >
-        {dataset.map((action) => (
-          <DataSamplesTableRow
-            key={action.ID}
-            action={action}
-            newRecordingId={0}
-            clearNewRecordingId={() => {}}
-            selected={false}
-            onSelectRow={() => {}}
-            onRecord={() => {}}
-            showHints={false}
-            onDeleteAction={() => {}}
-            renameShortcutScopeRef={() => {}}
-          />
-        ))}
-      </Grid>
+        <Grid
+          gridTemplateColumns="290px 1fr"
+          gap={3}
+          px={5}
+          w="100%"
+          py={2}
+          alignItems="start"
+          autoRows="max-content"
+          overflow="auto"
+          flexGrow={1}
+        >
+          {dataset.map((action) => (
+            <DataSamplesTableRow
+              key={action.ID}
+              action={action}
+              newRecordingId={0}
+              clearNewRecordingId={() => {}}
+              selected={false}
+              onSelectRow={() => {}}
+              onRecord={() => {}}
+              showHints={false}
+              onDeleteAction={() => {}}
+              renameShortcutScopeRef={() => {}}
+            />
+          ))}
+        </Grid>
+      </VStack>
     </>
   );
 };
@@ -323,7 +336,7 @@ const MakeCodePreview = ({ project }: MakeCodePreviewProps) => {
           alignItems="start"
           overflow="auto"
           flexShrink={1}
-          ref={scrollableAreaRef as React.RefObject<HTMLDivElement>}
+          ref={scrollableAreaRef}
         ></VStack>
         <CodeViewCard parentRef={scrollableAreaRef} project={project} />
       </MakeCodeRenderBlocksProvider>
@@ -356,4 +369,3 @@ const fetchSharedProjectText = async (longId: string): Promise<ScriptText> => {
   }
   return text;
 };
-