@centreon/ui 24.4.38 → 24.4.39

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 (108) hide show
  1. package/package.json +19 -14
  2. package/public/mockServiceWorker.js +1 -1
  3. package/src/Button/Icon/index.tsx +1 -1
  4. package/src/Button/Save/StartIcon.tsx +3 -3
  5. package/src/Button/Save/index.tsx +9 -5
  6. package/src/Checkbox/Checkbox.tsx +2 -2
  7. package/src/Checkbox/CheckboxGroup/index.tsx +2 -2
  8. package/src/Dashboard/Item.tsx +1 -1
  9. package/src/Dashboard/Layout.tsx +2 -2
  10. package/src/Dialog/index.tsx +1 -1
  11. package/src/FallbackPage/FallbackPage.tsx +3 -3
  12. package/src/FileDropZone/index.tsx +3 -1
  13. package/src/Form/Form.cypress.spec.tsx +133 -0
  14. package/src/Form/Inputs/CheckboxGroup.tsx +1 -4
  15. package/src/Form/Inputs/List/Content.tsx +62 -0
  16. package/src/Form/Inputs/List/List.styles.ts +29 -0
  17. package/src/Form/Inputs/List/List.tsx +58 -0
  18. package/src/Form/Inputs/List/useList.ts +81 -0
  19. package/src/Form/Inputs/index.tsx +3 -1
  20. package/src/Form/Inputs/models.ts +9 -1
  21. package/src/Graph/LineChart/BasicComponents/Lines/Threshold/Circle.tsx +2 -2
  22. package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx +5 -4
  23. package/src/Graph/LineChart/BasicComponents/Thresholds.tsx +2 -2
  24. package/src/Graph/LineChart/BasicComponents/useFilterLines.ts +1 -1
  25. package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/GuidingLines.tsx +2 -2
  26. package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/index.tsx +2 -3
  27. package/src/Graph/LineChart/InteractiveComponents/Annotations/EventAnnotations.tsx +1 -1
  28. package/src/Graph/LineChart/Legend/index.tsx +7 -8
  29. package/src/Graph/LineChart/Legend/useLegend.ts +3 -3
  30. package/src/Graph/LineChart/LineChart.tsx +4 -1
  31. package/src/Graph/LineChart/helpers/doc.ts +16 -13
  32. package/src/Graph/LineChart/helpers/index.ts +1 -1
  33. package/src/Graph/LineChart/index.stories.tsx +4 -2
  34. package/src/Graph/LineChart/index.tsx +4 -1
  35. package/src/Graph/SingleBar/Thresholds.tsx +2 -2
  36. package/src/Graph/Text/Text.stories.tsx +60 -4
  37. package/src/Graph/common/timeSeries/index.ts +3 -3
  38. package/src/InputField/Select/Autocomplete/Connected/index.tsx +10 -7
  39. package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx +1 -1
  40. package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx +1 -1
  41. package/src/InputField/Select/Autocomplete/Draggable/index.tsx +1 -1
  42. package/src/InputField/Select/Autocomplete/index.tsx +121 -115
  43. package/src/InputField/Select/IconPopover/index.tsx +2 -2
  44. package/src/InputField/Select/index.tsx +1 -1
  45. package/src/InputField/Text/index.tsx +2 -2
  46. package/src/Listing/Cell/DataCell.tsx +15 -1
  47. package/src/Listing/Header/ListingHeader.tsx +1 -1
  48. package/src/Listing/Listing.styles.ts +2 -3
  49. package/src/Listing/index.stories.tsx +12 -1
  50. package/src/Listing/index.tsx +1 -2
  51. package/src/Module/Module.cypress.spec.tsx +129 -0
  52. package/src/Module/index.tsx +2 -4
  53. package/src/RichTextEditor/RichTextEditor.tsx +12 -1
  54. package/src/SortableItems/index.tsx +2 -7
  55. package/src/ThemeProvider/index.tsx +24 -0
  56. package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts +6 -7
  57. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx +8 -3
  58. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts +0 -2
  59. package/src/TimePeriods/DateTimePickerInput.tsx +56 -19
  60. package/src/TimePeriods/ResolutionTimePeriod.cypress.spec.tsx +12 -9
  61. package/src/TimePeriods/TimePeriods.cypress.spec.tsx +9 -33
  62. package/src/TimePeriods/helpers/index.ts +1 -1
  63. package/src/TimePeriods/index.stories.tsx +12 -4
  64. package/src/TimePeriods/index.tsx +2 -2
  65. package/src/api/QueryProvider.tsx +1 -1
  66. package/src/api/TestQueryProvider.tsx +1 -1
  67. package/src/api/useFetchQuery/index.ts +27 -23
  68. package/src/api/useGraphQuery/index.ts +26 -5
  69. package/src/api/useGraphQuery/models.ts +5 -0
  70. package/src/api/useMutationQuery/index.ts +45 -21
  71. package/src/components/Button/Icon/IconButton.tsx +6 -2
  72. package/src/components/CollapsibleItem/CollapsibleItem.cypress.spec.tsx +76 -0
  73. package/src/components/CollapsibleItem/CollapsibleItem.stories.tsx +26 -0
  74. package/src/components/CollapsibleItem/CollapsibleItem.tsx +43 -14
  75. package/src/components/CollapsibleItem/useCollapsibleItemStyles.ts +24 -1
  76. package/src/components/DataTable/DataListing.tsx +6 -0
  77. package/src/components/DataTable/DataTable.cypress.spec.tsx +193 -0
  78. package/src/components/DataTable/DataTable.stories.tsx +40 -0
  79. package/src/components/DataTable/DataTable.styles.ts +3 -0
  80. package/src/components/DataTable/DataTable.tsx +3 -3
  81. package/src/components/DataTable/Item/DataTableItem.styles.ts +7 -2
  82. package/src/components/DataTable/Item/DataTableItem.tsx +4 -4
  83. package/src/components/DataTable/index.ts +3 -1
  84. package/src/components/Form/Dashboard/DashboardForm.tsx +15 -12
  85. package/src/components/ItemComposition/Item.tsx +1 -1
  86. package/src/components/ItemComposition/ItemComposition.cypress.spec.tsx +116 -0
  87. package/src/components/ItemComposition/ItemComposition.styles.ts +8 -1
  88. package/src/components/ItemComposition/ItemComposition.tsx +26 -16
  89. package/src/components/Layout/PageLayout/PageLayout.tsx +1 -1
  90. package/src/components/Layout/PageLayout/PageLayoutActions.tsx +1 -0
  91. package/src/components/Layout/PageLayout/PageLayoutBody.tsx +1 -0
  92. package/src/components/Layout/PageLayout/PageLayoutHeader.tsx +5 -1
  93. package/src/components/Layout/PageLayout/PageQuickAccess.tsx +76 -0
  94. package/src/components/Layout/PageLayout/index.ts +3 -1
  95. package/src/components/Layout/PageLayout.cypress.spec.tsx +66 -0
  96. package/src/components/Modal/Modal.styles.ts +1 -1
  97. package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.stories.tsx +3 -3
  98. package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx +1 -1
  99. package/src/components/Tooltip/ConfirmationTooltip/models.ts +1 -1
  100. package/src/index.ts +2 -2
  101. package/src/queryParameters/url/index.ts +5 -1
  102. package/src/utils/index.ts +2 -1
  103. package/src/utils/{useLicenseExpirationWarning.cypress.spec.tsx → useLicenseExpirationWarning.test.tsx} +48 -37
  104. package/src/utils/useLicenseExpirationWarning.ts +18 -18
  105. package/src/utils/usePluralizedTranslation.ts +21 -0
  106. package/src/screens/dashboard/DashboardsDetail.stories.tsx +0 -108
  107. package/src/screens/dashboard/DashboardsOverview.stories.tsx +0 -281
  108. package/src/utils/useDateTimePickerAdapter.ts +0 -309
@@ -1,309 +0,0 @@
1
- /* eslint-disable class-methods-use-this */
2
- import { useCallback } from 'react';
3
-
4
- import dayjs from 'dayjs';
5
- import { useAtomValue } from 'jotai';
6
- import { equals, isNil, not } from 'ramda';
7
-
8
- import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
9
-
10
- import { useLocaleDateTimeFormat } from '@centreon/ui';
11
- import { userAtom } from '@centreon/ui-context';
12
-
13
- interface GetDestinationAndConfiguredTimezoneOffsetProps {
14
- endTimezone?: string;
15
- startTimezone?: string;
16
- }
17
-
18
- interface UseDateTimePickerAdapterProps {
19
- Adapter;
20
- desktopPickerMediaQuery: string;
21
- }
22
-
23
- enum DSTState {
24
- SUMMER,
25
- WINTER,
26
- NODST
27
- }
28
-
29
- interface ToTimezonedDateProps {
30
- date: Date;
31
- timeZone?: string;
32
- }
33
-
34
- interface GetDSTStateProps {
35
- date: dayjs.Dayjs;
36
- timezoneToUse?: string;
37
- }
38
-
39
- export const useDateTimePickerAdapter = (): UseDateTimePickerAdapterProps => {
40
- const { timezone, locale } = useAtomValue(userAtom);
41
- const { format } = useLocaleDateTimeFormat();
42
-
43
- const desktopPickerMediaQuery =
44
- '@media (pointer: fine) or (min-width: 1024px)';
45
-
46
- const toTimezonedDate = ({
47
- date,
48
- timeZone = undefined
49
- }: ToTimezonedDateProps): Date => {
50
- if (isNil(timeZone)) {
51
- return new Date(date.toLocaleString('en-US'));
52
- }
53
-
54
- return new Date(date.toLocaleString('en-US', { timeZone }));
55
- };
56
-
57
- const getDestinationAndConfiguredTimezoneOffset = ({
58
- startTimezone = undefined,
59
- endTimezone = timezone
60
- }: GetDestinationAndConfiguredTimezoneOffsetProps): number => {
61
- const now = new Date();
62
- const currentTimezoneDate = toTimezonedDate({
63
- date: now,
64
- timeZone: startTimezone
65
- });
66
- const destinationTimezoneDate = toTimezonedDate({
67
- date: now,
68
- timeZone: endTimezone
69
- });
70
-
71
- return Math.floor(
72
- (currentTimezoneDate.getTime() - destinationTimezoneDate.getTime()) /
73
- 60 /
74
- 60 /
75
- 1000
76
- );
77
- };
78
-
79
- const getDSTState = useCallback(
80
- ({ date, timezoneToUse }: GetDSTStateProps): DSTState => {
81
- const hasNoTimezone = isNil(timezoneToUse);
82
- const currentYear = toTimezonedDate({
83
- date: new Date(),
84
- timeZone: timezoneToUse
85
- }).getFullYear();
86
-
87
- const january = hasNoTimezone
88
- ? dayjs(new Date(currentYear, 0, 1)).utcOffset()
89
- : dayjs(new Date(currentYear, 0, 1)).tz(timezoneToUse).utcOffset();
90
- const july = hasNoTimezone
91
- ? dayjs(new Date(currentYear, 6, 1)).utcOffset()
92
- : dayjs(new Date(currentYear, 6, 1)).tz(timezoneToUse).utcOffset();
93
-
94
- if (equals(january, july)) {
95
- return DSTState.NODST;
96
- }
97
-
98
- return july === date.tz().utcOffset() ? DSTState.SUMMER : DSTState.WINTER;
99
- },
100
- [timezone]
101
- );
102
-
103
- const getDSTStateForCurrentTimezone = useCallback(
104
- (date: dayjs.Dayjs): DSTState => {
105
- return getDSTState({ date });
106
- },
107
- []
108
- );
109
-
110
- interface Chunk {
111
- array: Array<unknown>;
112
- size: number;
113
- }
114
- class Adapter extends AdapterDayjs {
115
- public formatByString = (value, formatKey: string): string => {
116
- return format({
117
- date: value.tz(timezone).toDate(),
118
- formatString: formatKey
119
- });
120
- };
121
-
122
- public format = (date: dayjs.Dayjs, formatKey: string): string => {
123
- return this.formatByString(
124
- date.tz(timezone, true),
125
- this.formats[formatKey]
126
- );
127
- };
128
-
129
- public startOfWeek = (date: dayjs.Dayjs): dayjs.Dayjs => {
130
- if (date.tz(timezone).isUTC()) {
131
- return date.tz(timezone).startOf('week').utc();
132
- }
133
-
134
- return date.tz(timezone).startOf('week');
135
- };
136
-
137
- public setMinutes = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
138
- return date.minute(count);
139
- };
140
-
141
- public setHours = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
142
- return date.hour(count);
143
- };
144
-
145
- public isSameDay = (date: dayjs.Dayjs, comparing: dayjs.Dayjs): boolean => {
146
- const isSameYearAndMonth = this.isSameYear(date, comparing)
147
- ? this.isSameMonth(date, comparing)
148
- : false;
149
-
150
- return (
151
- isSameYearAndMonth &&
152
- date.tz(timezone).isSame(comparing.tz(timezone), 'day')
153
- );
154
- };
155
-
156
- public startOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
157
- return date.tz(timezone).startOf('day') as dayjs.Dayjs;
158
- };
159
-
160
- public endOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
161
- return date.tz(timezone).endOf('day') as dayjs.Dayjs;
162
- };
163
-
164
- public startOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
165
- if (date.tz(timezone).isUTC()) {
166
- return date.tz(timezone).utc();
167
- }
168
-
169
- return date.tz(timezone);
170
- };
171
-
172
- public endOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
173
- return date.tz(timezone).endOf('month') as dayjs.Dayjs;
174
- };
175
-
176
- public isSameMonth = (
177
- date: dayjs.Dayjs,
178
- comparing: dayjs.Dayjs
179
- ): boolean => {
180
- return date.tz(timezone).isSame(comparing.tz(timezone), 'month');
181
- };
182
-
183
- public getMonth = (date: dayjs.Dayjs): number => {
184
- return date.tz(timezone).month();
185
- };
186
-
187
- public isAfter = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
188
- return date.isAfter(value.endOf('month'));
189
- };
190
-
191
- public isBefore = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
192
- return date.isBefore(value.startOf('month'));
193
- };
194
-
195
- public getDaysInMonth = (date: dayjs.Dayjs): number => {
196
- return date.tz(timezone).daysInMonth();
197
- };
198
-
199
- public getWeekdays = (): Array<string> => {
200
- const start = dayjs().locale(locale).tz(timezone).startOf('week');
201
-
202
- return [0, 1, 2, 3, 4, 5, 6].map((diff) =>
203
- this.formatByString(start.add(diff, 'day'), 'dd')
204
- );
205
- };
206
-
207
- public getChunkFromArray = ({ array, size }: Chunk): Array<unknown> => {
208
- if (!array.length) {
209
- return [];
210
- }
211
- const head = array.slice(0, size);
212
- const tail = array.slice(size);
213
-
214
- return [head, ...this.getChunkFromArray({ array: tail, size })];
215
- };
216
-
217
- public getWeekArray = (date: dayjs.Dayjs): Array<Array<dayjs.Dayjs>> => {
218
- const isMorning = equals(dayjs().tz(timezone).format('a'), 'am');
219
- const startOfWeek = date.tz(timezone).startOf('month').startOf('week');
220
- const endOfWeek = date.tz(timezone).endOf('month').endOf('week');
221
- const start = startOfWeek.startOf('day');
222
- const end = endOfWeek.endOf('day');
223
- const customStart = isMorning
224
- ? startOfWeek.startOf('day')
225
- : startOfWeek.startOf('day');
226
- const customEnd = isMorning
227
- ? endOfWeek.startOf('day')
228
- : endOfWeek.startOf('day');
229
- const currentStart = start.isUTC()
230
- ? start.tz(timezone, true)
231
- : customStart;
232
- const currentEnd = end.isUTC() ? end.tz(timezone, true) : customEnd;
233
- const numberOfDaysInCurrentMonth = currentEnd.diff(
234
- currentStart,
235
- 'd',
236
- true
237
- );
238
- const daysOfMonthWithTimezone = [
239
- ...Array(Math.round(numberOfDaysInCurrentMonth)).keys()
240
- ].reduce(
241
- (acc, _, currentIndex) => {
242
- if (acc[currentIndex].isUTC()) {
243
- const newCurrent = acc[currentIndex]
244
- .utc()
245
- .add(1, 'day')
246
- .tz(timezone, true);
247
-
248
- return [...acc, newCurrent];
249
- }
250
- const newCurrent = acc[currentIndex].add(1, 'day');
251
-
252
- return [...acc, newCurrent];
253
- },
254
- [currentStart]
255
- );
256
- const weeksArray = this.getChunkFromArray({
257
- array: daysOfMonthWithTimezone,
258
- size: 7
259
- });
260
-
261
- return weeksArray as Array<Array<dayjs.Dayjs>>;
262
- };
263
-
264
- public mergeDateAndTime = (
265
- date: dayjs.Dayjs,
266
- time: dayjs.Dayjs
267
- ): dayjs.Dayjs => {
268
- const dateWithTimezone = date.tz(timezone).startOf('day');
269
- const timeWithTimezone = time.tz(timezone);
270
- const dateDSTState = getDSTState({
271
- date: dateWithTimezone,
272
- timezoneToUse: timezone
273
- });
274
- const dateDSTStateWithCurrentTimezone =
275
- getDSTStateForCurrentTimezone(date);
276
-
277
- if (equals(dateDSTStateWithCurrentTimezone, DSTState.WINTER)) {
278
- return dateWithTimezone
279
- .add(
280
- timeWithTimezone.hour() -
281
- getDestinationAndConfiguredTimezoneOffset({
282
- endTimezone: 'UTC',
283
- startTimezone: dayjs.tz.guess()
284
- }),
285
- 'hour'
286
- )
287
- .add(timeWithTimezone.minute(), 'minute')
288
- .add(timeWithTimezone.second(), 'second');
289
- }
290
-
291
- if (not(equals(dateDSTState, DSTState.SUMMER))) {
292
- return dateWithTimezone
293
- .add(timeWithTimezone.hour(), 'hour')
294
- .add(timeWithTimezone.minute(), 'minute')
295
- .add(timeWithTimezone.second(), 'second');
296
- }
297
-
298
- return dateWithTimezone
299
- .hour(timeWithTimezone.hour())
300
- .minute(timeWithTimezone.minute())
301
- .second(timeWithTimezone.second());
302
- };
303
- }
304
-
305
- return {
306
- Adapter,
307
- desktopPickerMediaQuery
308
- };
309
- };