@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.
Files changed (54) hide show
  1. package/package.json +12 -16
  2. package/src/Button/Save/StartIcon.tsx +3 -3
  3. package/src/Dashboard/Item.tsx +1 -1
  4. package/src/Dashboard/Layout.tsx +2 -2
  5. package/src/FileDropZone/index.tsx +1 -3
  6. package/src/Form/Inputs/CheckboxGroup.tsx +4 -1
  7. package/src/Form/Inputs/index.tsx +1 -1
  8. package/src/Graph/LineChart/BasicComponents/Lines/Threshold/Circle.tsx +2 -2
  9. package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx +4 -5
  10. package/src/Graph/LineChart/BasicComponents/Thresholds.tsx +2 -2
  11. package/src/Graph/LineChart/BasicComponents/useFilterLines.ts +1 -1
  12. package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/GuidingLines.tsx +2 -2
  13. package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/index.tsx +3 -2
  14. package/src/Graph/LineChart/InteractiveComponents/Annotations/EventAnnotations.tsx +1 -1
  15. package/src/Graph/LineChart/Legend/useLegend.ts +5 -5
  16. package/src/Graph/LineChart/helpers/doc.ts +13 -16
  17. package/src/Graph/LineChart/helpers/index.ts +1 -1
  18. package/src/Graph/LineChart/index.stories.tsx +2 -1
  19. package/src/Graph/SingleBar/Thresholds.tsx +2 -2
  20. package/src/Graph/Text/Text.stories.tsx +4 -60
  21. package/src/Graph/common/timeSeries/index.ts +3 -3
  22. package/src/InputField/Select/Autocomplete/Connected/index.tsx +7 -10
  23. package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx +1 -1
  24. package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx +1 -1
  25. package/src/InputField/Select/Autocomplete/Draggable/index.tsx +1 -1
  26. package/src/InputField/Select/IconPopover/index.tsx +2 -2
  27. package/src/InputField/Select/index.tsx +1 -1
  28. package/src/Listing/Header/ListingHeader.tsx +1 -1
  29. package/src/Listing/index.stories.tsx +1 -12
  30. package/src/Listing/index.tsx +1 -1
  31. package/src/RichTextEditor/RichTextEditor.tsx +1 -12
  32. package/src/SortableItems/index.tsx +7 -2
  33. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx +3 -8
  34. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts +2 -0
  35. package/src/TimePeriods/DateTimePickerInput.tsx +17 -45
  36. package/src/TimePeriods/TimePeriods.cypress.spec.tsx +33 -9
  37. package/src/TimePeriods/helpers/index.ts +1 -1
  38. package/src/TimePeriods/index.tsx +2 -2
  39. package/src/api/QueryProvider.tsx +1 -1
  40. package/src/api/TestQueryProvider.tsx +1 -1
  41. package/src/api/useFetchQuery/index.ts +24 -28
  42. package/src/api/useMutationQuery/index.ts +17 -39
  43. package/src/components/DataTable/Item/DataTableItem.tsx +2 -2
  44. package/src/components/Form/AccessRights/__fixtures__/contactAccessRight.mock.ts +0 -2
  45. package/src/components/Form/AccessRights/useAccessRightsForm.utils.ts +1 -1
  46. package/src/components/Form/Dashboard/DashboardForm.tsx +12 -15
  47. package/src/index.ts +0 -1
  48. package/src/queryParameters/url/index.ts +1 -5
  49. package/src/screens/dashboard/DashboardsDetail.stories.tsx +108 -0
  50. package/src/screens/dashboard/DashboardsOverview.stories.tsx +281 -0
  51. package/src/utils/index.ts +1 -0
  52. package/src/utils/useDateTimePickerAdapter.ts +309 -0
  53. package/src/utils/{useLicenseExpirationWarning.test.tsx → useLicenseExpirationWarning.cypress.spec.tsx} +37 -48
  54. 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={change} />
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 { SortableContext, SortingStrategy } from '@dnd-kit/sortable';
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(id, propertyToFilterItemsOn), items);
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={AdapterDayjs}
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 { useCallback } from 'react';
1
+ import dayjs from 'dayjs';
2
2
 
3
- import dayjs, { Dayjs } from 'dayjs';
4
- import { useAtomValue } from 'jotai';
5
- import { equals } from 'ramda';
3
+ import { DateTimePicker } from '@mui/x-date-pickers';
6
4
 
7
- import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
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: ChangeDateProps) => void;
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 | string;
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
- <LocalizationProvider
58
- adapterLocale={locale.substring(0, 2)}
59
- dateAdapter={AdapterDayjs}
60
- dateLibInstance={dayjs}
61
- >
62
- <DateTimePicker<dayjs.Dayjs>
63
- dayOfWeekFormatter={(dayOfWeek) =>
64
- dayOfWeek.substring(0, 2).toLocaleUpperCase()
65
- }
66
- desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
67
- disabled={disabled}
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 { useLocaleDateTimeFormat } from '@centreon/ui';
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
- <DateTimePickerInput
306
- changeDate={cy.stub()}
307
- date={new Date(item.initialDate)}
308
- property={CustomTimePeriodProperty.start}
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)
@@ -23,4 +23,4 @@ export const getTimePeriodById = ({
23
23
  id,
24
24
  timePeriods
25
25
  }: TimePeriodById): TimePeriod =>
26
- find<TimePeriod>(propEq(id, 'id'))(timePeriods) as TimePeriod;
26
+ find<TimePeriod>(propEq('id', id))(timePeriods) as TimePeriod;
@@ -20,7 +20,7 @@ import { useStyles } from './TimePeriods.styles';
20
20
  import {
21
21
  CustomTimePeriod as CustomTimePeriodModel,
22
22
  EndStartInterval,
23
- TimePeriod as TimePeriodModel
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<TimePeriodModel, 'timelineEventsLimit'>>;
37
+ extraTimePeriods?: Array<Omit<TimePeriod, 'timelineEventsLimit'>>;
38
38
  getIsError?: (value: boolean) => void;
39
39
  getParameters?: ({ start, end, timelineEventsLimit }: Parameters) => void;
40
40
  renderExternalComponent?: ReactNode;
@@ -7,7 +7,7 @@ const defaultCacheTime = 5 * 1_000;
7
7
  const client = new QueryClient({
8
8
  defaultOptions: {
9
9
  queries: {
10
- gcTime: defaultCacheTime,
10
+ cacheTime: defaultCacheTime,
11
11
  refetchOnWindowFocus: false,
12
12
  staleTime: defaultCacheTime,
13
13
  suspense: true
@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
5
5
  const client = new QueryClient({
6
6
  defaultOptions: {
7
7
  queries: {
8
- gcTime: 0,
8
+ cacheTime: 0,
9
9
  retry: false
10
10
  }
11
11
  }
@@ -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' | 'error'>;
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
- queryFn: ({ signal }): Promise<T | ResponseError> =>
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
- queryKey: getQueryKey(),
75
- ...queryOptions
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
- queryFn: ({ signal }): Promise<T | ResponseError> =>
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
- queryKey
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
- queryFn: ({ signal }): Promise<T | ResponseError> =>
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
- queryKey: getQueryKey()
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({ queryKey: getQueryKey() });
160
+ queryClient.cancelQueries(getQueryKey());
162
161
  };
163
162
  }, []);
164
163
 
165
- useEffect(
166
- () => {
167
- manageError();
168
- },
169
- useDeepCompare([queryData.data])
170
- );
164
+ useEffect(() => {
165
+ manageError();
166
+ }, useDeepCompare([queryData.data]));
171
167
 
172
168
  return {
173
- ...omit(['data', 'error'], queryData),
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, omit } from 'ramda';
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
- onError?: (
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> = Omit<
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
- mutationFn: (
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
- onError,
100
- onMutate,
101
- onSuccess
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
- manageError();
122
- },
123
- useDeepCompare([queryData.data])
124
- );
100
+ useEffect(() => {
101
+ manageError();
102
+ }, useDeepCompare([queryData.data]));
125
103
 
126
104
  return {
127
- ...omit(['isError'], queryData),
105
+ ...queryData,
128
106
  isError: (queryData.data as ResponseError | undefined)?.isError || false,
129
- isMutating: queryData.isPending
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 && labelsDelete && (
79
+ {onDelete && (
80
80
  <ConfirmationTooltip
81
81
  confirmVariant="error"
82
82
  labels={labelsDelete}
@@ -7,8 +7,6 @@ import {
7
7
  RoleResource
8
8
  } from '../AccessRights.resource';
9
9
 
10
- faker.seed(42);
11
-
12
10
  export const rolesMock = (): Array<RoleResource> => [
13
11
  { role: 'viewer' },
14
12
  { role: 'editor' }
@@ -36,6 +36,6 @@ export const createInitialState = (
36
36
  contactAccessRight,
37
37
  state: 'unchanged',
38
38
  stateHistory: []
39
- }) as ContactAccessRightStateResource
39
+ } as ContactAccessRightStateResource)
40
40
  )
41
41
  .sort(sortOnAddedStateFirstAndContactName);
@@ -1,8 +1,7 @@
1
1
  import { ReactElement, useCallback, useMemo } from 'react';
2
2
 
3
- import { string, number, object } from 'yup';
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', ([type], schema) => {
99
- if (equals(type, 'manual')) {
100
- schema
101
- .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
102
- .required(t(labelRequired) as string);
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';