@centreon/ui 23.10.120 → 23.10.122
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +12 -16
- package/src/Button/Save/StartIcon.tsx +3 -3
- package/src/Dashboard/Item.tsx +1 -1
- package/src/Dashboard/Layout.tsx +2 -2
- package/src/FileDropZone/index.tsx +1 -3
- package/src/Form/Inputs/CheckboxGroup.tsx +4 -1
- package/src/Form/Inputs/index.tsx +1 -1
- package/src/Graph/LineChart/BasicComponents/Lines/Threshold/Circle.tsx +2 -2
- package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx +4 -5
- package/src/Graph/LineChart/BasicComponents/Thresholds.tsx +2 -2
- package/src/Graph/LineChart/BasicComponents/useFilterLines.ts +1 -1
- package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/GuidingLines.tsx +2 -2
- package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/index.tsx +3 -2
- package/src/Graph/LineChart/InteractiveComponents/Annotations/EventAnnotations.tsx +1 -1
- package/src/Graph/LineChart/Legend/useLegend.ts +5 -5
- package/src/Graph/LineChart/helpers/doc.ts +13 -16
- package/src/Graph/LineChart/helpers/index.ts +1 -1
- package/src/Graph/LineChart/index.stories.tsx +2 -1
- package/src/Graph/SingleBar/Thresholds.tsx +2 -2
- package/src/Graph/Text/Text.stories.tsx +4 -60
- package/src/Graph/common/timeSeries/index.ts +3 -3
- package/src/InputField/Select/Autocomplete/Connected/index.tsx +7 -10
- package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx +1 -1
- package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx +1 -1
- package/src/InputField/Select/Autocomplete/Draggable/index.tsx +1 -1
- package/src/InputField/Select/IconPopover/index.tsx +2 -2
- package/src/InputField/Select/index.tsx +1 -1
- package/src/Listing/Header/ListingHeader.tsx +1 -1
- package/src/Listing/index.stories.tsx +1 -12
- package/src/Listing/index.tsx +1 -1
- package/src/RichTextEditor/RichTextEditor.tsx +1 -12
- package/src/SortableItems/index.tsx +7 -2
- package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx +3 -8
- package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts +2 -0
- package/src/TimePeriods/DateTimePickerInput.tsx +17 -45
- package/src/TimePeriods/TimePeriods.cypress.spec.tsx +33 -9
- package/src/TimePeriods/helpers/index.ts +1 -1
- package/src/TimePeriods/index.tsx +2 -2
- package/src/api/QueryProvider.tsx +1 -1
- package/src/api/TestQueryProvider.tsx +1 -1
- package/src/api/useFetchQuery/index.ts +24 -28
- package/src/api/useMutationQuery/index.ts +17 -39
- package/src/components/DataTable/Item/DataTableItem.tsx +2 -2
- package/src/components/Form/AccessRights/__fixtures__/contactAccessRight.mock.ts +0 -2
- package/src/components/Form/AccessRights/useAccessRightsForm.utils.ts +1 -1
- package/src/components/Form/Dashboard/DashboardForm.tsx +12 -15
- package/src/index.ts +0 -1
- package/src/queryParameters/url/index.ts +1 -5
- package/src/screens/dashboard/DashboardsDetail.stories.tsx +108 -0
- package/src/screens/dashboard/DashboardsOverview.stories.tsx +281 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/useDateTimePickerAdapter.ts +309 -0
- package/src/utils/{useLicenseExpirationWarning.test.tsx → useLicenseExpirationWarning.cypress.spec.tsx} +37 -48
- package/src/utils/useLicenseExpirationWarning.ts +18 -18
|
@@ -12,7 +12,6 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
|
|
|
12
12
|
import { equals } from 'ramda';
|
|
13
13
|
import { ListPlugin } from '@lexical/react/LexicalListPlugin';
|
|
14
14
|
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
|
|
15
|
-
import { $generateHtmlFromNodes } from '@lexical/html';
|
|
16
15
|
|
|
17
16
|
import { Typography } from '@mui/material';
|
|
18
17
|
|
|
@@ -39,7 +38,6 @@ export interface RichTextEditorProps {
|
|
|
39
38
|
openLinkInNewTab?: boolean;
|
|
40
39
|
placeholder?: string;
|
|
41
40
|
resetEditorToInitialStateCondition?: () => boolean;
|
|
42
|
-
setHtmlString?: (htmlString: string) => void;
|
|
43
41
|
toolbarClassName?: string;
|
|
44
42
|
toolbarPositions?: 'start' | 'end';
|
|
45
43
|
}
|
|
@@ -145,7 +143,6 @@ const RichTextEditor = ({
|
|
|
145
143
|
openLinkInNewTab = true,
|
|
146
144
|
initialize,
|
|
147
145
|
displayBlockButtons = true,
|
|
148
|
-
setHtmlString,
|
|
149
146
|
toolbarClassName
|
|
150
147
|
}: RichTextEditorProps): JSX.Element => {
|
|
151
148
|
const { classes } = useStyles({ toolbarPositions });
|
|
@@ -181,13 +178,6 @@ const RichTextEditor = ({
|
|
|
181
178
|
}
|
|
182
179
|
};
|
|
183
180
|
|
|
184
|
-
const change = (state: EditorState, editor: LexicalEditor): void => {
|
|
185
|
-
editor.update(() => {
|
|
186
|
-
setHtmlString?.($generateHtmlFromNodes(editor, null));
|
|
187
|
-
});
|
|
188
|
-
getEditorState?.(state, editor);
|
|
189
|
-
};
|
|
190
|
-
|
|
191
181
|
return (
|
|
192
182
|
<LexicalComposer initialConfig={initialConfig}>
|
|
193
183
|
<div className={classes.container}>
|
|
@@ -220,7 +210,6 @@ const RichTextEditor = ({
|
|
|
220
210
|
resetEditorToInitialStateCondition={
|
|
221
211
|
resetEditorToInitialStateCondition
|
|
222
212
|
}
|
|
223
|
-
setHtmlString={setHtmlString}
|
|
224
213
|
onBlur={onBlur}
|
|
225
214
|
/>
|
|
226
215
|
}
|
|
@@ -229,7 +218,7 @@ const RichTextEditor = ({
|
|
|
229
218
|
<HistoryPlugin />
|
|
230
219
|
<LinkPlugin />
|
|
231
220
|
<ListPlugin />
|
|
232
|
-
<OnChangePlugin onChange={
|
|
221
|
+
<OnChangePlugin onChange={getEditorState} />
|
|
233
222
|
<AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
|
|
234
223
|
<FloatingLinkEditorPlugin
|
|
235
224
|
editable={editable}
|
|
@@ -15,7 +15,11 @@ import {
|
|
|
15
15
|
DragEndEvent,
|
|
16
16
|
Over
|
|
17
17
|
} from '@dnd-kit/core';
|
|
18
|
-
import {
|
|
18
|
+
import {
|
|
19
|
+
SortableContext,
|
|
20
|
+
sortableKeyboardCoordinates,
|
|
21
|
+
SortingStrategy
|
|
22
|
+
} from '@dnd-kit/sortable';
|
|
19
23
|
import {
|
|
20
24
|
equals,
|
|
21
25
|
find,
|
|
@@ -113,6 +117,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
|
|
|
113
117
|
useSensor(MouseSensor),
|
|
114
118
|
useSensor(PointerSensor),
|
|
115
119
|
useSensor(KeyboardSensor, {
|
|
120
|
+
coordinateGetter: sortableKeyboardCoordinates,
|
|
116
121
|
keyboardCodes: {
|
|
117
122
|
cancel: ['Escape'],
|
|
118
123
|
end: ['Space', 'Enter'],
|
|
@@ -164,7 +169,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
|
|
|
164
169
|
};
|
|
165
170
|
|
|
166
171
|
const getItemById = (id): T | undefined =>
|
|
167
|
-
find(propEq(
|
|
172
|
+
find(propEq(propertyToFilterItemsOn, id), items);
|
|
168
173
|
|
|
169
174
|
const activeItem = getItemById(activeId) as Record<string, unknown>;
|
|
170
175
|
|
|
@@ -2,15 +2,12 @@ import { useAtomValue } from 'jotai';
|
|
|
2
2
|
import { makeStyles } from 'tss-react/mui';
|
|
3
3
|
import { equals } from 'ramda';
|
|
4
4
|
import { useTranslation } from 'react-i18next';
|
|
5
|
-
import dayjs from 'dayjs';
|
|
6
|
-
import utc from 'dayjs/plugin/utc';
|
|
7
|
-
import timezone from 'dayjs/plugin/timezone';
|
|
8
5
|
|
|
9
|
-
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
10
6
|
import { Typography } from '@mui/material';
|
|
11
7
|
import { LocalizationProvider } from '@mui/x-date-pickers';
|
|
12
8
|
|
|
13
9
|
import { userAtom } from '@centreon/ui-context';
|
|
10
|
+
import { useDateTimePickerAdapter } from '@centreon/ui';
|
|
14
11
|
|
|
15
12
|
import DateTimePickerInput from '../../DateTimePickerInput';
|
|
16
13
|
import {
|
|
@@ -23,9 +20,6 @@ import ErrorText from './ErrorText';
|
|
|
23
20
|
import { PickersData, PickersStartEndDateDirection } from './models';
|
|
24
21
|
import { PickersStartEndDateModel } from './usePickersStartEndDate';
|
|
25
22
|
|
|
26
|
-
dayjs.extend(utc);
|
|
27
|
-
dayjs.extend(timezone);
|
|
28
|
-
|
|
29
23
|
const useStyles = makeStyles()((theme) => ({
|
|
30
24
|
error: {
|
|
31
25
|
textAlign: 'center'
|
|
@@ -110,6 +104,7 @@ const PickersStartEndDate = ({
|
|
|
110
104
|
direction = PickersStartEndDateDirection.column
|
|
111
105
|
}: Props): JSX.Element => {
|
|
112
106
|
const { classes, cx } = useStyles();
|
|
107
|
+
const { Adapter } = useDateTimePickerAdapter();
|
|
113
108
|
|
|
114
109
|
const { locale } = useAtomValue(userAtom);
|
|
115
110
|
const error = useAtomValue(errorTimePeriodAtom);
|
|
@@ -131,7 +126,7 @@ const PickersStartEndDate = ({
|
|
|
131
126
|
return (
|
|
132
127
|
<LocalizationProvider
|
|
133
128
|
adapterLocale={locale.substring(0, 2)}
|
|
134
|
-
dateAdapter={
|
|
129
|
+
dateAdapter={Adapter}
|
|
135
130
|
>
|
|
136
131
|
<div className={styleContainer}>
|
|
137
132
|
<PickerDateWithLabel
|
|
@@ -18,6 +18,8 @@ export interface PickersData {
|
|
|
18
18
|
getError?: (value: boolean) => void;
|
|
19
19
|
isDisabledEndPicker?: boolean;
|
|
20
20
|
isDisabledStartPicker?: boolean;
|
|
21
|
+
onCloseEndPicker?: (isClosed: boolean) => void;
|
|
22
|
+
onCloseStartPicker?: (isClosed: boolean) => void;
|
|
21
23
|
rangeEndDate?: RangeDate;
|
|
22
24
|
rangeStartDate?: RangeDate;
|
|
23
25
|
}
|
|
@@ -1,29 +1,19 @@
|
|
|
1
|
-
import
|
|
1
|
+
import dayjs from 'dayjs';
|
|
2
2
|
|
|
3
|
-
import
|
|
4
|
-
import { useAtomValue } from 'jotai';
|
|
5
|
-
import { equals } from 'ramda';
|
|
3
|
+
import { DateTimePicker } from '@mui/x-date-pickers';
|
|
6
4
|
|
|
7
|
-
import {
|
|
8
|
-
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
9
|
-
|
|
10
|
-
import { userAtom } from '@centreon/ui-context';
|
|
5
|
+
import { useDateTimePickerAdapter } from '@centreon/ui';
|
|
11
6
|
|
|
12
7
|
import { CustomTimePeriodProperty } from './models';
|
|
13
8
|
|
|
14
|
-
interface ChangeDateProps {
|
|
15
|
-
date: Date;
|
|
16
|
-
property: CustomTimePeriodProperty | string;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
9
|
interface Props {
|
|
20
|
-
changeDate: (props
|
|
10
|
+
changeDate: (props) => void;
|
|
21
11
|
date: Date | null;
|
|
22
12
|
desktopMediaQuery?: string;
|
|
23
13
|
disabled?: boolean;
|
|
24
14
|
maxDate?: Date;
|
|
25
15
|
minDate?: Date;
|
|
26
|
-
property: CustomTimePeriodProperty
|
|
16
|
+
property: CustomTimePeriodProperty;
|
|
27
17
|
}
|
|
28
18
|
|
|
29
19
|
const DateTimePickerInput = ({
|
|
@@ -35,42 +25,24 @@ const DateTimePickerInput = ({
|
|
|
35
25
|
disabled = false,
|
|
36
26
|
desktopMediaQuery
|
|
37
27
|
}: Props): JSX.Element => {
|
|
38
|
-
const desktopPickerMediaQuery =
|
|
39
|
-
'@media (min-width: 1024px) or (pointer: fine)';
|
|
40
|
-
|
|
41
|
-
const { timezone, locale } = useAtomValue(userAtom);
|
|
42
|
-
|
|
43
|
-
const isUTC = equals(timezone, 'UTC');
|
|
28
|
+
const { desktopPickerMediaQuery } = useDateTimePickerAdapter();
|
|
44
29
|
|
|
45
30
|
const changeTime = (newValue: dayjs.Dayjs | null): void => {
|
|
46
31
|
changeDate({ date: dayjs(newValue).toDate(), property });
|
|
47
32
|
};
|
|
48
33
|
|
|
49
|
-
const formatDate = useCallback(
|
|
50
|
-
(currentDate: Date | null): Dayjs => {
|
|
51
|
-
return isUTC ? dayjs.utc(currentDate) : dayjs.tz(currentDate, timezone);
|
|
52
|
-
},
|
|
53
|
-
[isUTC, timezone]
|
|
54
|
-
);
|
|
55
|
-
|
|
56
34
|
return (
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
maxDate={maxDate && formatDate(maxDate)}
|
|
69
|
-
minDate={minDate && formatDate(minDate)}
|
|
70
|
-
value={formatDate(date)}
|
|
71
|
-
onChange={changeTime}
|
|
72
|
-
/>
|
|
73
|
-
</LocalizationProvider>
|
|
35
|
+
<DateTimePicker<dayjs.Dayjs>
|
|
36
|
+
dayOfWeekFormatter={(day: string): string =>
|
|
37
|
+
day.substring(0, 2).toUpperCase()
|
|
38
|
+
}
|
|
39
|
+
desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
|
|
40
|
+
disabled={disabled}
|
|
41
|
+
maxDate={maxDate && dayjs(maxDate)}
|
|
42
|
+
minDate={minDate && dayjs(minDate)}
|
|
43
|
+
value={dayjs(date)}
|
|
44
|
+
onChange={changeTime}
|
|
45
|
+
/>
|
|
74
46
|
);
|
|
75
47
|
};
|
|
76
48
|
|
|
@@ -3,10 +3,15 @@ import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
|
|
|
3
3
|
import timezonePlugin from 'dayjs/plugin/timezone';
|
|
4
4
|
import utcPlugin from 'dayjs/plugin/utc';
|
|
5
5
|
import { Provider, createStore } from 'jotai';
|
|
6
|
-
import { equals } from 'ramda';
|
|
6
|
+
import { equals, inc } from 'ramda';
|
|
7
7
|
import { renderHook } from '@testing-library/react';
|
|
8
8
|
|
|
9
|
-
import {
|
|
9
|
+
import { LocalizationProvider } from '@mui/x-date-pickers';
|
|
10
|
+
|
|
11
|
+
import {
|
|
12
|
+
useLocaleDateTimeFormat,
|
|
13
|
+
useDateTimePickerAdapter
|
|
14
|
+
} from '@centreon/ui';
|
|
10
15
|
import { ListingVariant, userAtom } from '@centreon/ui-context';
|
|
11
16
|
|
|
12
17
|
import { CustomTimePeriodProperty } from './models';
|
|
@@ -292,6 +297,10 @@ testData.forEach((item) =>
|
|
|
292
297
|
beforeEach(() => {
|
|
293
298
|
cy.viewport('macbook-13');
|
|
294
299
|
|
|
300
|
+
const { result } = renderHook(() => useDateTimePickerAdapter());
|
|
301
|
+
|
|
302
|
+
const { Adapter } = result.current;
|
|
303
|
+
|
|
295
304
|
const store = createStore();
|
|
296
305
|
store.set(userAtom, {
|
|
297
306
|
...retrievedUser,
|
|
@@ -302,16 +311,31 @@ testData.forEach((item) =>
|
|
|
302
311
|
cy.mount({
|
|
303
312
|
Component: (
|
|
304
313
|
<Provider store={store}>
|
|
305
|
-
<
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
314
|
+
<LocalizationProvider adapterLocale="en" dateAdapter={Adapter}>
|
|
315
|
+
<DateTimePickerInput
|
|
316
|
+
changeDate={cy.stub()}
|
|
317
|
+
date={new Date(item.initialDate)}
|
|
318
|
+
desktopMediaQuery="@media (min-width: 1024px)"
|
|
319
|
+
property={CustomTimePeriodProperty.start}
|
|
320
|
+
/>
|
|
321
|
+
</LocalizationProvider>
|
|
310
322
|
</Provider>
|
|
311
323
|
)
|
|
312
324
|
});
|
|
313
325
|
});
|
|
314
326
|
|
|
327
|
+
it('checks input calendar value contains correct date', () => {
|
|
328
|
+
const { result } = renderHook(() => useLocaleDateTimeFormat());
|
|
329
|
+
const { format } = result.current;
|
|
330
|
+
|
|
331
|
+
const dateInput = format({
|
|
332
|
+
date: dayjs(item.initialDate).tz(item.timezone),
|
|
333
|
+
formatString: 'L hh:mm A'
|
|
334
|
+
});
|
|
335
|
+
|
|
336
|
+
cy.get('input').should('have.value', dateInput);
|
|
337
|
+
});
|
|
338
|
+
|
|
315
339
|
it(`displays the correct number of days for the current month when the ${item.button} button is clicked`, () => {
|
|
316
340
|
cy.get('button').click();
|
|
317
341
|
item.data.forEach((element) => {
|
|
@@ -365,7 +389,7 @@ testData.forEach((item) =>
|
|
|
365
389
|
|
|
366
390
|
cy.get('[role="rowgroup"]').children().as('listWeeks');
|
|
367
391
|
|
|
368
|
-
cy.get('@listWeeks').should('have.length', numberWeeks);
|
|
392
|
+
cy.get('@listWeeks').should('have.length', inc(numberWeeks));
|
|
369
393
|
cy.get('@listWeeks').eq(0).as('firstWeek');
|
|
370
394
|
cy.get('@firstWeek').children().as('listDaysInFirstWeek');
|
|
371
395
|
|
|
@@ -392,7 +416,7 @@ testData.forEach((item) =>
|
|
|
392
416
|
|
|
393
417
|
cy.get('[role="rowgroup"]').children().as('listWeeks');
|
|
394
418
|
|
|
395
|
-
cy.get('@listWeeks').should('have.length', numberWeeks);
|
|
419
|
+
cy.get('@listWeeks').should('have.length', inc(numberWeeks));
|
|
396
420
|
|
|
397
421
|
cy.get('@listWeeks')
|
|
398
422
|
.eq(numberWeeks - 1)
|
|
@@ -20,7 +20,7 @@ import { useStyles } from './TimePeriods.styles';
|
|
|
20
20
|
import {
|
|
21
21
|
CustomTimePeriod as CustomTimePeriodModel,
|
|
22
22
|
EndStartInterval,
|
|
23
|
-
TimePeriod
|
|
23
|
+
TimePeriod
|
|
24
24
|
} from './models';
|
|
25
25
|
import useTimePeriod from './useTimePeriod';
|
|
26
26
|
|
|
@@ -34,7 +34,7 @@ interface Parameters extends EndStartInterval {
|
|
|
34
34
|
export interface Props {
|
|
35
35
|
adjustTimePeriodData?: Omit<CustomTimePeriodModel, 'timelineEventsLimit'>;
|
|
36
36
|
disabled?: boolean;
|
|
37
|
-
extraTimePeriods?: Array<Omit<
|
|
37
|
+
extraTimePeriods?: Array<Omit<TimePeriod, 'timelineEventsLimit'>>;
|
|
38
38
|
getIsError?: (value: boolean) => void;
|
|
39
39
|
getParameters?: ({ start, end, timelineEventsLimit }: Parameters) => void;
|
|
40
40
|
renderExternalComponent?: ReactNode;
|
|
@@ -25,9 +25,7 @@ export interface UseFetchQueryProps<T> {
|
|
|
25
25
|
getQueryKey: () => QueryKey;
|
|
26
26
|
httpCodesBypassErrorSnackbar?: Array<number>;
|
|
27
27
|
isPaginated?: boolean;
|
|
28
|
-
queryOptions?:
|
|
29
|
-
suspense?: boolean;
|
|
30
|
-
} & Omit<
|
|
28
|
+
queryOptions?: Omit<
|
|
31
29
|
UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
|
|
32
30
|
'queryKey' | 'queryFn'
|
|
33
31
|
>;
|
|
@@ -35,12 +33,11 @@ export interface UseFetchQueryProps<T> {
|
|
|
35
33
|
|
|
36
34
|
export type UseFetchQueryState<T> = {
|
|
37
35
|
data?: T;
|
|
38
|
-
error: Omit<ResponseError, 'isError'> | null;
|
|
39
36
|
fetchQuery: () => Promise<T | ResponseError>;
|
|
40
37
|
prefetchNextPage: ({ page, getPrefetchQueryKey }) => void;
|
|
41
38
|
prefetchPreviousPage: ({ page, getPrefetchQueryKey }) => void;
|
|
42
39
|
prefetchQuery: ({ endpointParams, queryKey }) => void;
|
|
43
|
-
} & Omit<QueryObserverBaseResult, 'data'
|
|
40
|
+
} & Omit<QueryObserverBaseResult, 'data'>;
|
|
44
41
|
|
|
45
42
|
export interface PrefetchEndpointParams {
|
|
46
43
|
page: number;
|
|
@@ -61,8 +58,9 @@ const useFetchQuery = <T extends object>({
|
|
|
61
58
|
}: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
|
|
62
59
|
const { showErrorMessage } = useSnackbar();
|
|
63
60
|
|
|
64
|
-
const queryData = useQuery<T | ResponseError, Error>(
|
|
65
|
-
|
|
61
|
+
const queryData = useQuery<T | ResponseError, Error>(
|
|
62
|
+
getQueryKey(),
|
|
63
|
+
({ signal }): Promise<T | ResponseError> =>
|
|
66
64
|
customFetch<T>({
|
|
67
65
|
catchError,
|
|
68
66
|
decoder,
|
|
@@ -71,9 +69,10 @@ const useFetchQuery = <T extends object>({
|
|
|
71
69
|
headers: new Headers(fetchHeaders),
|
|
72
70
|
signal
|
|
73
71
|
}),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
72
|
+
{
|
|
73
|
+
...queryOptions
|
|
74
|
+
}
|
|
75
|
+
);
|
|
77
76
|
|
|
78
77
|
const queryClient = useQueryClient();
|
|
79
78
|
|
|
@@ -93,8 +92,9 @@ const useFetchQuery = <T extends object>({
|
|
|
93
92
|
};
|
|
94
93
|
|
|
95
94
|
const prefetchQuery = ({ endpointParams, queryKey }): void => {
|
|
96
|
-
queryClient.prefetchQuery(
|
|
97
|
-
|
|
95
|
+
queryClient.prefetchQuery(
|
|
96
|
+
queryKey,
|
|
97
|
+
({ signal }): Promise<T | ResponseError> =>
|
|
98
98
|
customFetch<T>({
|
|
99
99
|
catchError,
|
|
100
100
|
decoder,
|
|
@@ -102,9 +102,8 @@ const useFetchQuery = <T extends object>({
|
|
|
102
102
|
endpoint: getEndpoint(endpointParams),
|
|
103
103
|
headers: new Headers(fetchHeaders),
|
|
104
104
|
signal
|
|
105
|
-
})
|
|
106
|
-
|
|
107
|
-
});
|
|
105
|
+
})
|
|
106
|
+
);
|
|
108
107
|
};
|
|
109
108
|
|
|
110
109
|
const prefetchNextPage = ({ page, getPrefetchQueryKey }): void => {
|
|
@@ -134,8 +133,9 @@ const useFetchQuery = <T extends object>({
|
|
|
134
133
|
};
|
|
135
134
|
|
|
136
135
|
const fetchQuery = (): Promise<T | ResponseError> => {
|
|
137
|
-
return queryClient.fetchQuery(
|
|
138
|
-
|
|
136
|
+
return queryClient.fetchQuery(
|
|
137
|
+
getQueryKey(),
|
|
138
|
+
({ signal }): Promise<T | ResponseError> =>
|
|
139
139
|
customFetch<T>({
|
|
140
140
|
catchError,
|
|
141
141
|
decoder,
|
|
@@ -143,9 +143,8 @@ const useFetchQuery = <T extends object>({
|
|
|
143
143
|
endpoint: getEndpoint(),
|
|
144
144
|
headers: new Headers(fetchHeaders),
|
|
145
145
|
signal
|
|
146
|
-
})
|
|
147
|
-
|
|
148
|
-
});
|
|
146
|
+
})
|
|
147
|
+
);
|
|
149
148
|
};
|
|
150
149
|
|
|
151
150
|
const data = useMemo(
|
|
@@ -158,19 +157,16 @@ const useFetchQuery = <T extends object>({
|
|
|
158
157
|
|
|
159
158
|
useEffect(() => {
|
|
160
159
|
return (): void => {
|
|
161
|
-
queryClient.cancelQueries(
|
|
160
|
+
queryClient.cancelQueries(getQueryKey());
|
|
162
161
|
};
|
|
163
162
|
}, []);
|
|
164
163
|
|
|
165
|
-
useEffect(
|
|
166
|
-
()
|
|
167
|
-
|
|
168
|
-
},
|
|
169
|
-
useDeepCompare([queryData.data])
|
|
170
|
-
);
|
|
164
|
+
useEffect(() => {
|
|
165
|
+
manageError();
|
|
166
|
+
}, useDeepCompare([queryData.data]));
|
|
171
167
|
|
|
172
168
|
return {
|
|
173
|
-
...omit(['data'
|
|
169
|
+
...omit(['data'], queryData),
|
|
174
170
|
data,
|
|
175
171
|
error: errorData?.isError ? omit(['isError'], errorData) : null,
|
|
176
172
|
fetchQuery,
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
} from '@tanstack/react-query';
|
|
9
9
|
import { JsonDecoder } from 'ts.data.json';
|
|
10
10
|
import anylogger from 'anylogger';
|
|
11
|
-
import { includes
|
|
11
|
+
import { includes } from 'ramda';
|
|
12
12
|
|
|
13
13
|
import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
|
|
14
14
|
import useSnackbar from '../../Snackbar/useSnackbar';
|
|
@@ -30,33 +30,14 @@ export type UseMutationQueryProps<T, TMeta> = {
|
|
|
30
30
|
getEndpoint: (_meta: TMeta) => string;
|
|
31
31
|
httpCodesBypassErrorSnackbar?: Array<number>;
|
|
32
32
|
method: Method;
|
|
33
|
-
|
|
34
|
-
error: ResponseError,
|
|
35
|
-
variables: T & { _meta: TMeta },
|
|
36
|
-
context: unknown
|
|
37
|
-
) => unknown;
|
|
38
|
-
onMutate?: (variables: T & { _meta: TMeta }) => Promise<unknown> | unknown;
|
|
39
|
-
onSuccess?: (
|
|
40
|
-
data: ResponseError | T,
|
|
41
|
-
variables: T & {
|
|
42
|
-
_meta: TMeta;
|
|
43
|
-
},
|
|
44
|
-
context: unknown
|
|
45
|
-
) => unknown;
|
|
46
|
-
} & Omit<
|
|
47
|
-
UseMutationOptions<T & { _meta?: TMeta }>,
|
|
48
|
-
'mutationFn' | 'onError' | 'onMutate' | 'onSuccess'
|
|
49
|
-
>;
|
|
33
|
+
} & Omit<UseMutationOptions<T & { _meta?: TMeta }>, 'mutationFn'>;
|
|
50
34
|
|
|
51
35
|
const log = anylogger('API Request');
|
|
52
36
|
|
|
53
|
-
export type UseMutationQueryState<T> =
|
|
54
|
-
UseMutationResult<T | ResponseError>,
|
|
55
|
-
'isError'
|
|
56
|
-
> & {
|
|
37
|
+
export type UseMutationQueryState<T> = {
|
|
57
38
|
isError: boolean;
|
|
58
39
|
isMutating: boolean;
|
|
59
|
-
}
|
|
40
|
+
} & UseMutationResult<T | ResponseError>;
|
|
60
41
|
|
|
61
42
|
const useMutationQuery = <T extends object, TMeta>({
|
|
62
43
|
getEndpoint,
|
|
@@ -76,10 +57,8 @@ const useMutationQuery = <T extends object, TMeta>({
|
|
|
76
57
|
T | ResponseError,
|
|
77
58
|
ResponseError,
|
|
78
59
|
T & { _meta: TMeta }
|
|
79
|
-
>(
|
|
80
|
-
|
|
81
|
-
_payload: T & { _meta: TMeta }
|
|
82
|
-
): Promise<T | ResponseError> => {
|
|
60
|
+
>(
|
|
61
|
+
(_payload: T & { _meta: TMeta }): Promise<T | ResponseError> => {
|
|
83
62
|
const { _meta, ...payload } = _payload || {};
|
|
84
63
|
|
|
85
64
|
return customFetch<T>({
|
|
@@ -96,10 +75,12 @@ const useMutationQuery = <T extends object, TMeta>({
|
|
|
96
75
|
payload
|
|
97
76
|
});
|
|
98
77
|
},
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
78
|
+
{
|
|
79
|
+
onError,
|
|
80
|
+
onMutate,
|
|
81
|
+
onSuccess
|
|
82
|
+
}
|
|
83
|
+
);
|
|
103
84
|
|
|
104
85
|
const manageError = (): void => {
|
|
105
86
|
const data = queryData.data as ResponseError | undefined;
|
|
@@ -116,17 +97,14 @@ const useMutationQuery = <T extends object, TMeta>({
|
|
|
116
97
|
}
|
|
117
98
|
};
|
|
118
99
|
|
|
119
|
-
useEffect(
|
|
120
|
-
()
|
|
121
|
-
|
|
122
|
-
},
|
|
123
|
-
useDeepCompare([queryData.data])
|
|
124
|
-
);
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
manageError();
|
|
102
|
+
}, useDeepCompare([queryData.data]));
|
|
125
103
|
|
|
126
104
|
return {
|
|
127
|
-
...
|
|
105
|
+
...queryData,
|
|
128
106
|
isError: (queryData.data as ResponseError | undefined)?.isError || false,
|
|
129
|
-
isMutating: queryData.
|
|
107
|
+
isMutating: queryData.isLoading
|
|
130
108
|
};
|
|
131
109
|
};
|
|
132
110
|
|
|
@@ -22,7 +22,7 @@ export interface DataTableItemProps {
|
|
|
22
22
|
description?: string;
|
|
23
23
|
hasActions?: boolean;
|
|
24
24
|
hasCardAction?: boolean;
|
|
25
|
-
labelsDelete
|
|
25
|
+
labelsDelete: {
|
|
26
26
|
cancel: string;
|
|
27
27
|
confirm: {
|
|
28
28
|
label: string;
|
|
@@ -76,7 +76,7 @@ const DataTableItem = forwardRef(
|
|
|
76
76
|
{hasActions && (
|
|
77
77
|
<MuiCardActions>
|
|
78
78
|
<span>
|
|
79
|
-
{onDelete &&
|
|
79
|
+
{onDelete && (
|
|
80
80
|
<ConfirmationTooltip
|
|
81
81
|
confirmVariant="error"
|
|
82
82
|
labels={labelsDelete}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { ReactElement, useCallback, useMemo } from 'react';
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import * as Yup from 'yup';
|
|
4
4
|
import { useTranslation } from 'react-i18next';
|
|
5
|
-
import { equals } from 'ramda';
|
|
6
5
|
|
|
7
6
|
import { InputType } from '../../../Form/Inputs/models';
|
|
8
7
|
import { Form, FormProps } from '../../../Form';
|
|
@@ -85,8 +84,8 @@ const DashboardForm = ({
|
|
|
85
84
|
}
|
|
86
85
|
],
|
|
87
86
|
submit: (values, bag) => onSubmit?.(values, bag),
|
|
88
|
-
validationSchema: object({
|
|
89
|
-
description: string()
|
|
87
|
+
validationSchema: Yup.object().shape({
|
|
88
|
+
description: Yup.string()
|
|
90
89
|
.label(labels?.entity?.description || '')
|
|
91
90
|
.max(
|
|
92
91
|
180,
|
|
@@ -94,19 +93,17 @@ const DashboardForm = ({
|
|
|
94
93
|
`${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
|
|
95
94
|
)
|
|
96
95
|
.nullable(),
|
|
97
|
-
globalRefreshInterval: object({
|
|
98
|
-
interval: number().when('type',
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
return schema.nullable();
|
|
96
|
+
globalRefreshInterval: Yup.object().shape({
|
|
97
|
+
interval: Yup.number().when('type', {
|
|
98
|
+
is: 'global',
|
|
99
|
+
otherwise: Yup.number().nullable(),
|
|
100
|
+
then: Yup.number()
|
|
101
|
+
.min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
|
|
102
|
+
.required(t(labelRequired) as string)
|
|
106
103
|
}),
|
|
107
|
-
type: string()
|
|
104
|
+
type: Yup.string()
|
|
108
105
|
}),
|
|
109
|
-
name: string()
|
|
106
|
+
name: Yup.string()
|
|
110
107
|
.label(labels?.entity?.name)
|
|
111
108
|
.min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))
|
|
112
109
|
.max(50, ({ max, label }) => t(labelMustBeMost, { label, max }))
|
package/src/index.ts
CHANGED
|
@@ -162,5 +162,4 @@ export * from './Graph/common/timeSeries';
|
|
|
162
162
|
|
|
163
163
|
export { default as TimePeriods } from './TimePeriods';
|
|
164
164
|
export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
|
|
165
|
-
export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';
|
|
166
165
|
export * from './ParentSize';
|