Task List Demo modifications

Author: Brenda Coronel

packages/playground/src/demo/display/task-grid/utils.ts

@@ -1,6 +1,5 @@
 import { getLogger } from "@azure/bonito-core";
 import { LoadMoreFn } from "@azure/bonito-ui/lib/hooks";
-import { BatchTaskOutput } from "@batch/ui-service/lib/batch-models";
 
 export interface DemoTask {
     name: string;

packages/playground/src/demo/display/task-list/task-list-demo.tsx

@@ -6,21 +6,18 @@ import { Slider } from "@fluentui/react/lib/Slider";
 import { Stack } from "@fluentui/react/lib/Stack";
 import React from "react";
 import { DemoPane } from "../../../layout/demo-pane";
-import { PagedAsyncIterableIterator } from "@azure/core-paging";
-import { BatchTaskOutput } from "@batch/ui-service/src/batch-models";
+import { TextField } from "@azure/bonito-ui/src/components/form";
+import { TextFieldOnChange } from "../../../functions";
+//import { PagedAsyncIterableIterator } from "@azure/core-paging";
 
 export const TaskListDemo: React.FC = () => {
-    const [taskNumberSlider, setTaskNumberSlider] = React.useState(0);
-    const [items, setItems] = React.useState<
-        PagedAsyncIterableIterator<BatchTaskOutput>
-    >([]);
-    const taskNumberSliderOnChange = (value: number) => {
-        setTaskNumberSlider(value);
-    };
-    const [accountEndpoint, setAccountEndpoint] = React.useState<string>(
+    const [taskNumberField, setTaskNumberField] = React.useState(0);
+    const [items, setItems] = React.useState<any>([]);
+
+    const [accountEndpoint] = React.useState<string>(
         "mercury.eastus.batch.azure.com"
     );
-    const [jobId, setJobId] = React.useState<string>("faketestjob1");
+    const [jobId] = React.useState<string>("faketestjob1");
 
     React.useEffect(() => {
         let isMounted = true;
@@ -56,12 +53,12 @@ export const TaskListDemo: React.FC = () => {
                 styles={{ root: { marginBottom: "1em" } }}
             >
                 <Stack.Item grow={1}>
-                    <Slider
-                        label="Additional Tasks Slider"
-                        min={0}
-                        max={50}
-                        value={taskNumberSlider}
-                        onChange={taskNumberSliderOnChange}
+                    <TextField
+                        value={taskNumberField}
+                        onChange={(_, newValue) => {
+                            const number = parseInt(`${newValue}`);
+                            setTaskNumberField(number);
+                        }}
                     />
                 </Stack.Item>
             </Stack>

packages/react/src/task/task-list.tsx

@@ -7,10 +7,10 @@ import {
 import { BatchTaskOutput } from "@batch/ui-service/lib/batch-models";
 import { CiCircleChevDown } from "react-icons/ci";
 import { IconButton } from "@fluentui/react/lib/Button";
-import { PagedAsyncIterableIterator } from "@azure/core-paging";
+//import { PagedAsyncIterableIterator } from "@azure/core-paging";
 
 interface TaskListProps {
-    pagedTasks: PagedAsyncIterableIterator<BatchTaskOutput>;
+    pagedTasks: any;
 }
 
 interface taskRow extends BatchTaskOutput {
@@ -25,19 +25,21 @@ export const TaskList = (props: TaskListProps) => {
     const [isCompact] = React.useState<boolean>(false);
 
     React.useEffect(() => {
-        const taskArray = [];
+        const parseTasks = async () => {
+            const taskArray = [];
 
-        for await (const task of pagedTasks) {
-            taskArray.push({
-                url: task.url,
-                id: task.id,
-                state: task.state,
-                creationTime: task.creationTime,
-                executionInfo: task.executionInfo,
-            });
-        }
-
-        setItems(taskArray);
+            for await (const task of pagedTasks) {
+                taskArray.push({
+                    url: task.url,
+                    id: task.id,
+                    state: task.state,
+                    creationTime: task.creationTime,
+                    executionInfo: task.executionInfo,
+                });
+            }
+            setItems(taskArray);
+        };
+        parseTasks();
     }, [pagedTasks]);
 
     return (

packages/service/src/task/__tests__/fake-task-service.spec.ts

@@ -19,10 +19,15 @@ describe("FakeTaskService", () => {
     });
 
     test("Generate tasks", async () => {
-        const task = await service.generateTasks(accountEndpoint, jobId);
-        expect(task[0].id).toEqual("task1");
-        expect(task[1].id).toEqual("task2");
-        expect(task[2].id).toEqual("task3");
+        const tasks = await service.listTasks(accountEndpoint, jobId, 3);
+        const allTasks = [];
+        for await (const task of tasks) {
+            allTasks.push(task);
+        }
+
+        expect(allTasks[0].id).toEqual("task1");
+        expect(allTasks[1].id).toEqual("task2");
+        expect(allTasks[2].id).toEqual("task3");
     });
 
     test("List batch tasks", async () => {
@@ -49,7 +54,7 @@ describe("FakeTaskService", () => {
     });
 
     test("List hardcoded batch tasks", async () => {
-        const tasks = await service.listHardcodedTasks(accountEndpoint, jobId);
+        const tasks = await service.listTasks(accountEndpoint, jobId);
 
         const allTasks = [];