1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-08 23:35:31 +02:00

feat(edge/jobs): migrate create view to react [EE-2221] (#11867)

This commit is contained in:
Chaim Lev-Ari 2024-06-02 11:10:38 +03:00 committed by GitHub
parent 94c91035a7
commit 02fbdfec36
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 777 additions and 163 deletions

View file

@ -1,6 +1,6 @@
import { formatDate } from '@/portainer/filters/filters';
import { FORMAT } from '../../common/ScheduledTimeField';
import { FORMAT } from '@@/DateTimeField';
import { columnHelper } from './helper';

View file

@ -1,8 +1,6 @@
import DateTimePicker from 'react-datetime-picker';
import { Calendar, X } from 'lucide-react';
import { useField } from 'formik';
import { useMemo } from 'react';
import { string } from 'yup';
import { useField } from 'formik';
import {
isoDate,
@ -10,25 +8,18 @@ import {
TIME_FORMAT,
} from '@/portainer/filters/filters';
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
import { DateTimeField, FORMAT } from '@@/DateTimeField';
import { TextTip } from '@@/Tip/TextTip';
import { FormValues } from './types';
import 'react-datetime-picker/dist/DateTimePicker.css';
import 'react-calendar/dist/Calendar.css';
interface Props {
disabled?: boolean;
}
export const FORMAT = 'YYYY-MM-DD HH:mm';
export function ScheduledTimeField({ disabled }: Props) {
const [{ name, value }, { error }, { setValue }] =
useField<FormValues['scheduledTime']>('scheduledTime');
const dateValue = useMemo(() => parseIsoDate(value, FORMAT), [value]);
if (!value) {
@ -37,31 +28,19 @@ export function ScheduledTimeField({ disabled }: Props) {
return (
<>
<FormControl label="Schedule date & time" errors={error}>
{!disabled ? (
<DateTimePicker
format="y-MM-dd HH:mm"
className="form-control [&>div]:border-0"
onChange={(date) => {
const dateToSave =
date || new Date(Date.now() + 24 * 60 * 60 * 1000);
setValue(isoDate(dateToSave.valueOf(), FORMAT));
}}
name={name}
value={dateValue}
calendarIcon={<Calendar className="lucide" />}
clearIcon={<X className="lucide" />}
disableClock
minDate={new Date(Date.now() - 24 * 60 * 60 * 1000)}
/>
) : (
<Input
defaultValue={value}
disabled
data-cy="update-schedules-time-input"
/>
)}
</FormControl>
<DateTimeField
label="Schedule date & time"
minDate={new Date(Date.now() - 24 * 60 * 60 * 1000)}
onChange={(date) => {
const dateToSave = date || new Date(Date.now() + 24 * 60 * 60 * 1000);
setValue(isoDate(dateToSave.valueOf(), FORMAT));
}}
error={error}
disabled={disabled}
name={name}
value={dateValue}
data-cy="update-schedules-time-input"
/>
{!disabled && value && (
<TextTip color="blue">
If time zone is not set on edge agent then UTC+0 will be used.