Refactor buttons for admin v4

distribworks · Feb 11, 2024 · 86ce37f · 86ce37f
1 parent aec162a
commit 86ce37f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/ui/src/jobs/JobEdit.tsx b/ui/src/jobs/JobEdit.tsx
@@ -6,29 +6,32 @@ import {
     SimpleForm,
     BooleanInput,
     NumberInput,
-    DateTimeInput
+    DateTimeInput,
+    required,
+    useRecordContext
 } from 'react-admin';
 import { JsonInput } from "react-admin-json-view";
 
-export const JobEdit = (props: any) => (
-    <Edit {...props}>
+export const JobEdit = () => {
+    const record = useRecordContext();
+    return (<Edit {...record}>
         <EditForm />
-    </Edit>
-);
+    </Edit>);
+}
 
 export const JobCreate = (props: any) => (
     <Create {...props}>
         <EditForm />
     </Create>
 );
 
-const EditForm = (props: any) => (
-    <SimpleForm  {...props}>
+const EditForm = (record: any) => (
+    <SimpleForm  {...record}>
         <TextInput disabled source="id" helperText="Job id. Must be unique, it's a copy of name." />
-        <TextInput source="name" helperText="Job name. Must be unique, acts as the id." />
+        <TextInput source="name" helperText="Job name. Must be unique, acts as the id." validate={required()} />
         <TextInput source="displayname" helperText="Display name of the job. If present, displayed instead of the name." />
         <TextInput source="timezone" helperText="The timezone where the cron expression will be evaluated in." />
-        <TextInput source="schedule" helperText="Cron expression for the job. When to run the job." />
+        <TextInput source="schedule" helperText="Cron expression for the job. When to run the job." validate={required()} />
         <TextInput source="owner" helperText="Arbitrary string indicating the owner of the job." />
         <TextInput source="owner_email" helperText="Email address to use for notifications."/>
         <TextInput source="parent_job" helperText="Job id of job that this job is dependent upon." />
@@ -71,7 +74,7 @@ const EditForm = (props: any) => (
             }}
             helperText="Job metadata describes the job and allows filtering from the API."
         />
-        <TextInput source="executor" helperText="Executor plugin to be used in this job." />
+        <TextInput source="executor" helperText="Executor plugin to be used in this job." validate={required()} />
         <JsonInput
             source="executor_config"
             // validate={required(){ return true }}
@@ -83,6 +86,7 @@ const EditForm = (props: any) => (
                 displayDataTypes: false,
             }}
             helperText="Configuration arguments for the specific executor."
+            validate={required()}
         />
         <BooleanInput source="disabled" helperText="Is this job disabled?" />
         <NumberInput source="retries" helperText="Number of times to retry a job that failed an execution." />

diff --git a/ui/src/jobs/JobShow.tsx b/ui/src/jobs/JobShow.tsx
@@ -25,8 +25,8 @@ import { apiUrl } from '../dataProvider';
 // basePath={basePath}
 const JobShowActions = ({ basePath, data, resource }: any) => (
     <TopToolbar>
-        <RunButton record={data} />
-        <ToggleButton record={data} />
+        <RunButton />
+        <ToggleButton />
         <EditButton record={data} />
     </TopToolbar>
 );

diff --git a/ui/src/jobs/RunButton.tsx b/ui/src/jobs/RunButton.tsx
@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import { useNotify, useRefresh, Button } from 'react-admin';
+import { useNotify, useRefresh, Button, useRecordContext } from 'react-admin';
 import { apiUrl } from '../dataProvider';
 import RunIcon from '@mui/icons-material/PlayArrow';
 
-const RunButton = ({record}: any) => {
+const RunButton = () => {
+    const record = useRecordContext();
     const refresh = useRefresh();
     const notify = useNotify();
     const [loading, setLoading] = useState(false);

diff --git a/ui/src/jobs/ToggleButton.tsx b/ui/src/jobs/ToggleButton.tsx
@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import { useNotify, useRefresh, Button } from 'react-admin';
+import { useNotify, useRefresh, Button, useRecordContext } from 'react-admin';
 import { apiUrl } from '../dataProvider';
 import ToggleIcon from '@mui/icons-material/Pause';
 
-const ToggleButton = ({record}: any) => {
+const ToggleButton = () => {
+    const record = useRecordContext();
     const refresh = useRefresh();
     const notify = useNotify();
     const [loading, setLoading] = useState(false);