@strapi/content-releases 0.0.0-next.d470b4f75cf00f24f440b80300f1c833c322b871 → 0.0.0-next.d7fa025a4eacdc27490fb1629b0efb93e3cb58b9

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 (32) hide show
  1. package/LICENSE +17 -1
  2. package/dist/_chunks/{App-1hHIqUoZ.js → App-dLXY5ei3.js} +636 -382
  3. package/dist/_chunks/App-dLXY5ei3.js.map +1 -0
  4. package/dist/_chunks/{App-U6GbyLIE.mjs → App-jrh58sXY.mjs} +647 -394
  5. package/dist/_chunks/App-jrh58sXY.mjs.map +1 -0
  6. package/dist/_chunks/{PurchaseContentReleases-Clm0iACO.mjs → PurchaseContentReleases-3tRbmbY3.mjs} +2 -2
  7. package/dist/_chunks/PurchaseContentReleases-3tRbmbY3.mjs.map +1 -0
  8. package/dist/_chunks/{PurchaseContentReleases-YhAPgpG9.js → PurchaseContentReleases-bpIYXOfu.js} +2 -2
  9. package/dist/_chunks/PurchaseContentReleases-bpIYXOfu.js.map +1 -0
  10. package/dist/_chunks/{en-bDhIlw-B.js → en-HrREghh3.js} +23 -6
  11. package/dist/_chunks/en-HrREghh3.js.map +1 -0
  12. package/dist/_chunks/{en-GqXgfmzl.mjs → en-ltT1TlKQ.mjs} +23 -6
  13. package/dist/_chunks/en-ltT1TlKQ.mjs.map +1 -0
  14. package/dist/_chunks/{index-l-FvkQlQ.js → index-CVO0Rqdm.js} +385 -20
  15. package/dist/_chunks/index-CVO0Rqdm.js.map +1 -0
  16. package/dist/_chunks/{index-gkExFBa0.mjs → index-PiOGBETy.mjs} +401 -36
  17. package/dist/_chunks/index-PiOGBETy.mjs.map +1 -0
  18. package/dist/admin/index.js +1 -1
  19. package/dist/admin/index.mjs +2 -2
  20. package/dist/server/index.js +948 -450
  21. package/dist/server/index.js.map +1 -1
  22. package/dist/server/index.mjs +947 -450
  23. package/dist/server/index.mjs.map +1 -1
  24. package/package.json +15 -13
  25. package/dist/_chunks/App-1hHIqUoZ.js.map +0 -1
  26. package/dist/_chunks/App-U6GbyLIE.mjs.map +0 -1
  27. package/dist/_chunks/PurchaseContentReleases-Clm0iACO.mjs.map +0 -1
  28. package/dist/_chunks/PurchaseContentReleases-YhAPgpG9.js.map +0 -1
  29. package/dist/_chunks/en-GqXgfmzl.mjs.map +0 -1
  30. package/dist/_chunks/en-bDhIlw-B.js.map +0 -1
  31. package/dist/_chunks/index-gkExFBa0.mjs.map +0 -1
  32. package/dist/_chunks/index-l-FvkQlQ.js.map +0 -1
@@ -1,15 +1,18 @@
1
1
  import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
- import { useNotification, useAPIErrorHandler, LoadingIndicatorPage, ConfirmDialog, useRBAC, useTracking, RelativeTime, CheckPermissions, useQueryParams, AnErrorOccurred, NoContent, Table, PageSizeURLQuery, PaginationURLQuery, CheckPagePermissions } from "@strapi/helper-plugin";
3
- import { useLocation, useParams, useHistory, Redirect, Link as Link$1, Switch, Route } from "react-router-dom";
4
- import { p as pluginId, u as useGetReleaseQuery, a as useUpdateReleaseMutation, b as useDeleteReleaseMutation, c as usePublishReleaseMutation, P as PERMISSIONS, d as useTypedDispatch, e as useGetReleaseActionsQuery, f as useUpdateReleaseActionMutation, R as ReleaseActionOptions, g as ReleaseActionMenu, i as isAxiosError, r as releaseApi, h as useGetReleasesQuery, j as useCreateReleaseMutation } from "./index-gkExFBa0.mjs";
2
+ import { RelativeTime as RelativeTime$1, useNotification, useAPIErrorHandler, useQueryParams, useTracking, LoadingIndicatorPage, CheckPermissions, PageSizeURLQuery, PaginationURLQuery, AnErrorOccurred, ConfirmDialog, useRBAC, useStrapiApp, NoContent, Table, CheckPagePermissions } from "@strapi/helper-plugin";
3
+ import { useLocation, useHistory, useParams, Redirect, Link as Link$2, Switch, Route } from "react-router-dom";
4
+ import { g as getTimezoneOffset, p as pluginId, u as useGetReleasesQuery, a as useCreateReleaseMutation, P as PERMISSIONS, i as isAxiosError, b as useGetReleaseQuery, c as useUpdateReleaseMutation, d as useDeleteReleaseMutation, e as usePublishReleaseMutation, f as useTypedDispatch, h as useGetReleaseActionsQuery, j as useUpdateReleaseActionMutation, R as ReleaseActionOptions, k as ReleaseActionMenu, r as releaseApi } from "./index-PiOGBETy.mjs";
5
5
  import * as React from "react";
6
- import { unstable_useDocument, useLicenseLimits } from "@strapi/admin/strapi-admin";
7
- import { ModalLayout, ModalHeader, Typography, ModalBody, TextInput, ModalFooter, Button, Flex, ContentLayout, Main, HeaderLayout, Link, IconButton, SingleSelect, SingleSelectOption, Badge, Tr, Td, Icon, Tooltip, Alert, TabGroup, Box, Tabs, Tab, Divider, TabPanels, TabPanel, EmptyStateLayout, Grid, GridItem } from "@strapi/design-system";
8
- import { Menu, LinkButton, Link as Link$2 } from "@strapi/design-system/v2";
9
- import { Pencil, Trash, ArrowLeft, More, CrossCircle, CheckCircle, Plus, EmptyDocuments } from "@strapi/icons";
6
+ import { useLicenseLimits, unstable_useDocument } from "@strapi/admin/strapi-admin";
7
+ import { ModalLayout, ModalHeader, Typography, ModalBody, Flex, TextInput, Box, Checkbox, DatePicker, TimePicker, ModalFooter, Button, Combobox, ComboboxOption, Alert, Main, HeaderLayout, ContentLayout, TabGroup, Tabs, Tab, Divider, TabPanels, TabPanel, EmptyStateLayout, Grid, GridItem, Badge, Link as Link$1, IconButton, SingleSelect, SingleSelectOption, Tr, Td, Icon, Tooltip } from "@strapi/design-system";
8
+ import { Link, Menu, LinkButton } from "@strapi/design-system/v2";
9
+ import { Plus, EmptyDocuments, Pencil, Trash, ArrowLeft, More, CrossCircle, CheckCircle } from "@strapi/icons";
10
+ import format from "date-fns/format";
11
+ import { utcToZonedTime, zonedTimeToUtc } from "date-fns-tz";
10
12
  import { useIntl } from "react-intl";
11
13
  import styled from "styled-components";
12
- import { Formik, Form } from "formik";
14
+ import { formatISO } from "date-fns";
15
+ import { Formik, Form, useFormikContext } from "formik";
13
16
  import * as yup from "yup";
14
17
  import "@reduxjs/toolkit/query";
15
18
  import "axios";
@@ -17,11 +20,21 @@ import "@reduxjs/toolkit/query/react";
17
20
  import "react-redux";
18
21
  const RELEASE_SCHEMA = yup.object().shape({
19
22
  name: yup.string().trim().required(),
20
- // scheduledAt is a date, but we always receive strings from the client
21
23
  scheduledAt: yup.string().nullable(),
22
- timezone: yup.string().when("scheduledAt", {
23
- is: (scheduledAt) => !!scheduledAt,
24
- then: yup.string().required(),
24
+ isScheduled: yup.boolean().optional(),
25
+ time: yup.string().when("isScheduled", {
26
+ is: true,
27
+ then: yup.string().trim().required(),
28
+ otherwise: yup.string().nullable()
29
+ }),
30
+ timezone: yup.string().when("isScheduled", {
31
+ is: true,
32
+ then: yup.string().required().nullable(),
33
+ otherwise: yup.string().nullable()
34
+ }),
35
+ date: yup.string().when("isScheduled", {
36
+ is: true,
37
+ then: yup.string().required().nullable(),
25
38
  otherwise: yup.string().nullable()
26
39
  })
27
40
  }).required().noUnknown();
@@ -34,6 +47,22 @@ const ReleaseModal = ({
34
47
  const { formatMessage } = useIntl();
35
48
  const { pathname } = useLocation();
36
49
  const isCreatingRelease = pathname === `/plugins/${pluginId}`;
50
+ const { timezoneList, systemTimezone = { value: "UTC+00:00-Africa/Abidjan " } } = getTimezones(
51
+ initialValues.scheduledAt ? new Date(initialValues.scheduledAt) : /* @__PURE__ */ new Date()
52
+ );
53
+ const getScheduledTimestamp = (values) => {
54
+ const { date, time, timezone } = values;
55
+ if (!date || !time || !timezone)
56
+ return null;
57
+ const timezoneWithoutOffset = timezone.split("&")[1];
58
+ return zonedTimeToUtc(`${date} ${time}`, timezoneWithoutOffset);
59
+ };
60
+ const getTimezoneWithOffset = () => {
61
+ const currentTimezone = timezoneList.find(
62
+ (timezone) => timezone.value.split("&")[1] === initialValues.timezone
63
+ );
64
+ return currentTimezone?.value || systemTimezone.value;
65
+ };
37
66
  return /* @__PURE__ */ jsxs(ModalLayout, { onClose: handleClose, labelledBy: "title", children: [
38
67
  /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { id: "title", fontWeight: "bold", textColor: "neutral800", children: formatMessage(
39
68
  {
@@ -45,45 +74,130 @@ const ReleaseModal = ({
45
74
  /* @__PURE__ */ jsx(
46
75
  Formik,
47
76
  {
48
- validateOnChange: false,
49
- onSubmit: handleSubmit,
50
- initialValues,
77
+ onSubmit: (values) => {
78
+ handleSubmit({
79
+ ...values,
80
+ timezone: values.timezone ? values.timezone.split("&")[1] : null,
81
+ scheduledAt: values.isScheduled ? getScheduledTimestamp(values) : null
82
+ });
83
+ },
84
+ initialValues: {
85
+ ...initialValues,
86
+ timezone: initialValues.timezone ? getTimezoneWithOffset() : systemTimezone.value
87
+ },
51
88
  validationSchema: RELEASE_SCHEMA,
52
- children: ({ values, errors, handleChange }) => /* @__PURE__ */ jsxs(Form, { children: [
53
- /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsx(
54
- TextInput,
55
- {
56
- label: formatMessage({
57
- id: "content-releases.modal.form.input.label.release-name",
58
- defaultMessage: "Name"
59
- }),
60
- name: "name",
61
- value: values.name,
62
- error: errors.name,
63
- onChange: handleChange,
64
- required: true
65
- }
66
- ) }),
89
+ validateOnChange: false,
90
+ children: ({ values, errors, handleChange, setFieldValue }) => /* @__PURE__ */ jsxs(Form, { children: [
91
+ /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
92
+ /* @__PURE__ */ jsx(
93
+ TextInput,
94
+ {
95
+ label: formatMessage({
96
+ id: "content-releases.modal.form.input.label.release-name",
97
+ defaultMessage: "Name"
98
+ }),
99
+ name: "name",
100
+ value: values.name,
101
+ error: errors.name,
102
+ onChange: handleChange,
103
+ required: true
104
+ }
105
+ ),
106
+ /* @__PURE__ */ jsx(Box, { width: "max-content", children: /* @__PURE__ */ jsx(
107
+ Checkbox,
108
+ {
109
+ name: "isScheduled",
110
+ value: values.isScheduled,
111
+ onChange: (event) => {
112
+ setFieldValue("isScheduled", event.target.checked);
113
+ if (!event.target.checked) {
114
+ setFieldValue("date", null);
115
+ setFieldValue("time", "");
116
+ setFieldValue("timezone", null);
117
+ } else {
118
+ setFieldValue("date", initialValues.date);
119
+ setFieldValue("time", initialValues.time);
120
+ setFieldValue("timezone", initialValues.timezone ?? systemTimezone?.value);
121
+ }
122
+ },
123
+ children: /* @__PURE__ */ jsx(
124
+ Typography,
125
+ {
126
+ textColor: values.isScheduled ? "primary600" : "neutral800",
127
+ fontWeight: values.isScheduled ? "semiBold" : "regular",
128
+ children: formatMessage({
129
+ id: "modal.form.input.label.schedule-release",
130
+ defaultMessage: "Schedule release"
131
+ })
132
+ }
133
+ )
134
+ }
135
+ ) }),
136
+ values.isScheduled && /* @__PURE__ */ jsxs(Fragment, { children: [
137
+ /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "start", children: [
138
+ /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(
139
+ DatePicker,
140
+ {
141
+ label: formatMessage({
142
+ id: "content-releases.modal.form.input.label.date",
143
+ defaultMessage: "Date"
144
+ }),
145
+ name: "date",
146
+ error: errors.date,
147
+ onChange: (date) => {
148
+ const isoFormatDate = date ? formatISO(date, { representation: "date" }) : null;
149
+ setFieldValue("date", isoFormatDate);
150
+ },
151
+ clearLabel: formatMessage({
152
+ id: "content-releases.modal.form.input.clearLabel",
153
+ defaultMessage: "Clear"
154
+ }),
155
+ onClear: () => {
156
+ setFieldValue("date", null);
157
+ },
158
+ selectedDate: values.date || void 0,
159
+ required: true,
160
+ minDate: utcToZonedTime(/* @__PURE__ */ new Date(), values.timezone.split("&")[1])
161
+ }
162
+ ) }),
163
+ /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(
164
+ TimePicker,
165
+ {
166
+ label: formatMessage({
167
+ id: "content-releases.modal.form.input.label.time",
168
+ defaultMessage: "Time"
169
+ }),
170
+ name: "time",
171
+ error: errors.time,
172
+ onChange: (time) => {
173
+ setFieldValue("time", time);
174
+ },
175
+ clearLabel: formatMessage({
176
+ id: "content-releases.modal.form.input.clearLabel",
177
+ defaultMessage: "Clear"
178
+ }),
179
+ onClear: () => {
180
+ setFieldValue("time", "");
181
+ },
182
+ value: values.time || void 0,
183
+ required: true
184
+ }
185
+ ) })
186
+ ] }),
187
+ /* @__PURE__ */ jsx(TimezoneComponent, { timezoneOptions: timezoneList })
188
+ ] })
189
+ ] }) }),
67
190
  /* @__PURE__ */ jsx(
68
191
  ModalFooter,
69
192
  {
70
193
  startActions: /* @__PURE__ */ jsx(Button, { onClick: handleClose, variant: "tertiary", name: "cancel", children: formatMessage({ id: "cancel", defaultMessage: "Cancel" }) }),
71
- endActions: /* @__PURE__ */ jsx(
72
- Button,
194
+ endActions: /* @__PURE__ */ jsx(Button, { name: "submit", loading: isLoading, type: "submit", children: formatMessage(
73
195
  {
74
- name: "submit",
75
- loading: isLoading,
76
- disabled: !values.name || values.name === initialValues.name,
77
- type: "submit",
78
- children: formatMessage(
79
- {
80
- id: "content-releases.modal.form.button.submit",
81
- defaultMessage: "{isCreatingRelease, select, true {Continue} other {Save}}"
82
- },
83
- { isCreatingRelease }
84
- )
85
- }
86
- )
196
+ id: "content-releases.modal.form.button.submit",
197
+ defaultMessage: "{isCreatingRelease, select, true {Continue} other {Save}}"
198
+ },
199
+ { isCreatingRelease }
200
+ ) })
87
201
  }
88
202
  )
89
203
  ] })
@@ -91,6 +205,371 @@ const ReleaseModal = ({
91
205
  )
92
206
  ] });
93
207
  };
208
+ const getTimezones = (selectedDate) => {
209
+ const timezoneList = Intl.supportedValuesOf("timeZone").map((timezone) => {
210
+ const utcOffset = getTimezoneOffset(timezone, selectedDate);
211
+ return { offset: utcOffset, value: `${utcOffset}&${timezone}` };
212
+ });
213
+ const systemTimezone = timezoneList.find(
214
+ (timezone) => timezone.value.split("&")[1] === Intl.DateTimeFormat().resolvedOptions().timeZone
215
+ );
216
+ return { timezoneList, systemTimezone };
217
+ };
218
+ const TimezoneComponent = ({ timezoneOptions }) => {
219
+ const { values, errors, setFieldValue } = useFormikContext();
220
+ const { formatMessage } = useIntl();
221
+ const [timezoneList, setTimezoneList] = React.useState(timezoneOptions);
222
+ React.useEffect(() => {
223
+ if (values.date) {
224
+ const { timezoneList: timezoneList2 } = getTimezones(new Date(values.date));
225
+ setTimezoneList(timezoneList2);
226
+ const updatedTimezone = values.timezone && timezoneList2.find((tz) => tz.value.split("&")[1] === values.timezone.split("&")[1]);
227
+ if (updatedTimezone) {
228
+ setFieldValue("timezone", updatedTimezone.value);
229
+ }
230
+ }
231
+ }, [setFieldValue, values.date, values.timezone]);
232
+ return /* @__PURE__ */ jsx(
233
+ Combobox,
234
+ {
235
+ label: formatMessage({
236
+ id: "content-releases.modal.form.input.label.timezone",
237
+ defaultMessage: "Timezone"
238
+ }),
239
+ autocomplete: { type: "list", filter: "contains" },
240
+ name: "timezone",
241
+ value: values.timezone || void 0,
242
+ textValue: values.timezone ? values.timezone.replace(/&/, " ") : void 0,
243
+ onChange: (timezone) => {
244
+ setFieldValue("timezone", timezone);
245
+ },
246
+ onTextValueChange: (timezone) => {
247
+ setFieldValue("timezone", timezone);
248
+ },
249
+ onClear: () => {
250
+ setFieldValue("timezone", "");
251
+ },
252
+ error: errors.timezone,
253
+ required: true,
254
+ children: timezoneList.map((timezone) => /* @__PURE__ */ jsx(ComboboxOption, { value: timezone.value, children: timezone.value.replace(/&/, " ") }, timezone.value))
255
+ }
256
+ );
257
+ };
258
+ const LinkCard = styled(Link)`
259
+ display: block;
260
+ `;
261
+ const RelativeTime = styled(RelativeTime$1)`
262
+ display: inline-block;
263
+ &::first-letter {
264
+ text-transform: uppercase;
265
+ }
266
+ `;
267
+ const getBadgeProps = (status) => {
268
+ let color;
269
+ switch (status) {
270
+ case "ready":
271
+ color = "success";
272
+ break;
273
+ case "blocked":
274
+ color = "warning";
275
+ break;
276
+ case "failed":
277
+ color = "danger";
278
+ break;
279
+ case "done":
280
+ color = "primary";
281
+ break;
282
+ case "empty":
283
+ default:
284
+ color = "neutral";
285
+ }
286
+ return {
287
+ textColor: `${color}600`,
288
+ backgroundColor: `${color}100`,
289
+ borderColor: `${color}200`
290
+ };
291
+ };
292
+ const ReleasesGrid = ({ sectionTitle, releases = [], isError = false }) => {
293
+ const { formatMessage } = useIntl();
294
+ if (isError) {
295
+ return /* @__PURE__ */ jsx(AnErrorOccurred, {});
296
+ }
297
+ if (releases?.length === 0) {
298
+ return /* @__PURE__ */ jsx(
299
+ EmptyStateLayout,
300
+ {
301
+ content: formatMessage(
302
+ {
303
+ id: "content-releases.page.Releases.tab.emptyEntries",
304
+ defaultMessage: "No releases"
305
+ },
306
+ {
307
+ target: sectionTitle
308
+ }
309
+ ),
310
+ icon: /* @__PURE__ */ jsx(EmptyDocuments, { width: "10rem" })
311
+ }
312
+ );
313
+ }
314
+ return /* @__PURE__ */ jsx(Grid, { gap: 4, children: releases.map(({ id, name, scheduledAt, status }) => /* @__PURE__ */ jsx(GridItem, { col: 3, s: 6, xs: 12, children: /* @__PURE__ */ jsx(LinkCard, { href: `content-releases/${id}`, isExternal: false, children: /* @__PURE__ */ jsxs(
315
+ Flex,
316
+ {
317
+ direction: "column",
318
+ justifyContent: "space-between",
319
+ padding: 4,
320
+ hasRadius: true,
321
+ background: "neutral0",
322
+ shadow: "tableShadow",
323
+ height: "100%",
324
+ width: "100%",
325
+ alignItems: "start",
326
+ gap: 4,
327
+ children: [
328
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", gap: 1, children: [
329
+ /* @__PURE__ */ jsx(Typography, { as: "h3", variant: "delta", fontWeight: "bold", children: name }),
330
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: scheduledAt ? /* @__PURE__ */ jsx(RelativeTime, { timestamp: new Date(scheduledAt) }) : formatMessage({
331
+ id: "content-releases.pages.Releases.not-scheduled",
332
+ defaultMessage: "Not scheduled"
333
+ }) })
334
+ ] }),
335
+ /* @__PURE__ */ jsx(Badge, { ...getBadgeProps(status), children: status })
336
+ ]
337
+ }
338
+ ) }) }, id)) });
339
+ };
340
+ const StyledAlert = styled(Alert)`
341
+ button {
342
+ display: none;
343
+ }
344
+ p + div {
345
+ margin-left: auto;
346
+ }
347
+ `;
348
+ const INITIAL_FORM_VALUES = {
349
+ name: "",
350
+ date: null,
351
+ time: "",
352
+ isScheduled: true,
353
+ scheduledAt: null,
354
+ timezone: null
355
+ };
356
+ const ReleasesPage = () => {
357
+ const tabRef = React.useRef(null);
358
+ const location = useLocation();
359
+ const [releaseModalShown, setReleaseModalShown] = React.useState(false);
360
+ const toggleNotification = useNotification();
361
+ const { formatMessage } = useIntl();
362
+ const { push, replace } = useHistory();
363
+ const { formatAPIError } = useAPIErrorHandler();
364
+ const [{ query }, setQuery] = useQueryParams();
365
+ const response = useGetReleasesQuery(query);
366
+ const [createRelease, { isLoading: isSubmittingForm }] = useCreateReleaseMutation();
367
+ const { getFeature } = useLicenseLimits();
368
+ const { maximumReleases = 3 } = getFeature("cms-content-releases");
369
+ const { trackUsage } = useTracking();
370
+ const { isLoading, isSuccess, isError } = response;
371
+ const activeTab = response?.currentData?.meta?.activeTab || "pending";
372
+ const activeTabIndex = ["pending", "done"].indexOf(activeTab);
373
+ React.useEffect(() => {
374
+ if (location?.state?.errors) {
375
+ toggleNotification({
376
+ type: "warning",
377
+ title: formatMessage({
378
+ id: "content-releases.pages.Releases.notification.error.title",
379
+ defaultMessage: "Your request could not be processed."
380
+ }),
381
+ message: formatMessage({
382
+ id: "content-releases.pages.Releases.notification.error.message",
383
+ defaultMessage: "Please try again or open another release."
384
+ })
385
+ });
386
+ replace({ state: null });
387
+ }
388
+ }, [formatMessage, location?.state?.errors, replace, toggleNotification]);
389
+ React.useEffect(() => {
390
+ if (tabRef.current) {
391
+ tabRef.current._handlers.setSelectedTabIndex(activeTabIndex);
392
+ }
393
+ }, [activeTabIndex]);
394
+ const toggleAddReleaseModal = () => {
395
+ setReleaseModalShown((prev) => !prev);
396
+ };
397
+ if (isLoading) {
398
+ return /* @__PURE__ */ jsx(Main, { "aria-busy": isLoading, children: /* @__PURE__ */ jsx(LoadingIndicatorPage, {}) });
399
+ }
400
+ const totalPendingReleases = isSuccess && response.currentData?.meta?.pendingReleasesCount || 0;
401
+ const hasReachedMaximumPendingReleases = totalPendingReleases >= maximumReleases;
402
+ const handleTabChange = (index) => {
403
+ setQuery({
404
+ ...query,
405
+ page: 1,
406
+ pageSize: response?.currentData?.meta?.pagination?.pageSize || 16,
407
+ filters: {
408
+ releasedAt: {
409
+ $notNull: index === 0 ? false : true
410
+ }
411
+ }
412
+ });
413
+ };
414
+ const handleAddRelease = async ({ name, scheduledAt, timezone }) => {
415
+ const response2 = await createRelease({
416
+ name,
417
+ scheduledAt,
418
+ timezone
419
+ });
420
+ if ("data" in response2) {
421
+ toggleNotification({
422
+ type: "success",
423
+ message: formatMessage({
424
+ id: "content-releases.modal.release-created-notification-success",
425
+ defaultMessage: "Release created."
426
+ })
427
+ });
428
+ trackUsage("didCreateRelease");
429
+ push(`/plugins/content-releases/${response2.data.data.id}`);
430
+ } else if (isAxiosError(response2.error)) {
431
+ toggleNotification({
432
+ type: "warning",
433
+ message: formatAPIError(response2.error)
434
+ });
435
+ } else {
436
+ toggleNotification({
437
+ type: "warning",
438
+ message: formatMessage({ id: "notification.error", defaultMessage: "An error occurred" })
439
+ });
440
+ }
441
+ };
442
+ return /* @__PURE__ */ jsxs(Main, { "aria-busy": isLoading, children: [
443
+ /* @__PURE__ */ jsx(
444
+ HeaderLayout,
445
+ {
446
+ title: formatMessage({
447
+ id: "content-releases.pages.Releases.title",
448
+ defaultMessage: "Releases"
449
+ }),
450
+ subtitle: formatMessage({
451
+ id: "content-releases.pages.Releases.header-subtitle",
452
+ defaultMessage: "Create and manage content updates"
453
+ }),
454
+ primaryAction: /* @__PURE__ */ jsx(CheckPermissions, { permissions: PERMISSIONS.create, children: /* @__PURE__ */ jsx(
455
+ Button,
456
+ {
457
+ startIcon: /* @__PURE__ */ jsx(Plus, {}),
458
+ onClick: toggleAddReleaseModal,
459
+ disabled: hasReachedMaximumPendingReleases,
460
+ children: formatMessage({
461
+ id: "content-releases.header.actions.add-release",
462
+ defaultMessage: "New release"
463
+ })
464
+ }
465
+ ) })
466
+ }
467
+ ),
468
+ /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
469
+ hasReachedMaximumPendingReleases && /* @__PURE__ */ jsx(
470
+ StyledAlert,
471
+ {
472
+ marginBottom: 6,
473
+ action: /* @__PURE__ */ jsx(Link, { href: "https://strapi.io/pricing-cloud", isExternal: true, children: formatMessage({
474
+ id: "content-releases.pages.Releases.max-limit-reached.action",
475
+ defaultMessage: "Explore plans"
476
+ }) }),
477
+ title: formatMessage(
478
+ {
479
+ id: "content-releases.pages.Releases.max-limit-reached.title",
480
+ defaultMessage: "You have reached the {number} pending {number, plural, one {release} other {releases}} limit."
481
+ },
482
+ { number: maximumReleases }
483
+ ),
484
+ onClose: () => {
485
+ },
486
+ closeLabel: "",
487
+ children: formatMessage({
488
+ id: "content-releases.pages.Releases.max-limit-reached.message",
489
+ defaultMessage: "Upgrade to manage an unlimited number of releases."
490
+ })
491
+ }
492
+ ),
493
+ /* @__PURE__ */ jsxs(
494
+ TabGroup,
495
+ {
496
+ label: formatMessage({
497
+ id: "content-releases.pages.Releases.tab-group.label",
498
+ defaultMessage: "Releases list"
499
+ }),
500
+ variant: "simple",
501
+ initialSelectedTabIndex: activeTabIndex,
502
+ onTabChange: handleTabChange,
503
+ ref: tabRef,
504
+ children: [
505
+ /* @__PURE__ */ jsxs(Box, { paddingBottom: 8, children: [
506
+ /* @__PURE__ */ jsxs(Tabs, { children: [
507
+ /* @__PURE__ */ jsx(Tab, { children: formatMessage(
508
+ {
509
+ id: "content-releases.pages.Releases.tab.pending",
510
+ defaultMessage: "Pending ({count})"
511
+ },
512
+ {
513
+ count: totalPendingReleases
514
+ }
515
+ ) }),
516
+ /* @__PURE__ */ jsx(Tab, { children: formatMessage({
517
+ id: "content-releases.pages.Releases.tab.done",
518
+ defaultMessage: "Done"
519
+ }) })
520
+ ] }),
521
+ /* @__PURE__ */ jsx(Divider, {})
522
+ ] }),
523
+ /* @__PURE__ */ jsxs(TabPanels, { children: [
524
+ /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
525
+ ReleasesGrid,
526
+ {
527
+ sectionTitle: "pending",
528
+ releases: response?.currentData?.data,
529
+ isError
530
+ }
531
+ ) }),
532
+ /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
533
+ ReleasesGrid,
534
+ {
535
+ sectionTitle: "done",
536
+ releases: response?.currentData?.data,
537
+ isError
538
+ }
539
+ ) })
540
+ ] })
541
+ ]
542
+ }
543
+ ),
544
+ response.currentData?.meta?.pagination?.total ? /* @__PURE__ */ jsxs(Flex, { paddingTop: 4, alignItems: "flex-end", justifyContent: "space-between", children: [
545
+ /* @__PURE__ */ jsx(
546
+ PageSizeURLQuery,
547
+ {
548
+ options: ["8", "16", "32", "64"],
549
+ defaultValue: response?.currentData?.meta?.pagination?.pageSize.toString()
550
+ }
551
+ ),
552
+ /* @__PURE__ */ jsx(
553
+ PaginationURLQuery,
554
+ {
555
+ pagination: {
556
+ pageCount: response?.currentData?.meta?.pagination?.pageCount || 0
557
+ }
558
+ }
559
+ )
560
+ ] }) : null
561
+ ] }) }),
562
+ releaseModalShown && /* @__PURE__ */ jsx(
563
+ ReleaseModal,
564
+ {
565
+ handleClose: toggleAddReleaseModal,
566
+ handleSubmit: handleAddRelease,
567
+ isLoading: isSubmittingForm,
568
+ initialValues: INITIAL_FORM_VALUES
569
+ }
570
+ )
571
+ ] });
572
+ };
94
573
  const ReleaseInfoWrapper = styled(Flex)`
95
574
  align-self: stretch;
96
575
  border-bottom-right-radius: ${({ theme }) => theme.borderRadius};
@@ -104,6 +583,10 @@ const StyledMenuItem = styled(Menu.Item)`
104
583
  span {
105
584
  color: ${({ theme, disabled }) => disabled && theme.colors.neutral500};
106
585
  }
586
+
587
+ &:hover {
588
+ background: ${({ theme, variant = "neutral" }) => theme.colors[`${variant}100`]};
589
+ }
107
590
  `;
108
591
  const PencilIcon = styled(Pencil)`
109
592
  width: ${({ theme }) => theme.spaces[3]};
@@ -170,7 +653,7 @@ const ReleaseDetailsLayout = ({
170
653
  toggleWarningSubmit,
171
654
  children
172
655
  }) => {
173
- const { formatMessage } = useIntl();
656
+ const { formatMessage, formatDate, formatTime } = useIntl();
174
657
  const { releaseId } = useParams();
175
658
  const {
176
659
  data,
@@ -216,7 +699,12 @@ const ReleaseDetailsLayout = ({
216
699
  }
217
700
  };
218
701
  const handleRefresh = () => {
219
- dispatch(releaseApi.util.invalidateTags([{ type: "ReleaseAction", id: "LIST" }]));
702
+ dispatch(
703
+ releaseApi.util.invalidateTags([
704
+ { type: "ReleaseAction", id: "LIST" },
705
+ { type: "Release", id: releaseId }
706
+ ])
707
+ );
220
708
  };
221
709
  const getCreatedByUser = () => {
222
710
  if (!release?.createdBy) {
@@ -252,19 +740,44 @@ const ReleaseDetailsLayout = ({
252
740
  }
253
741
  const totalEntries = release.actions.meta.count || 0;
254
742
  const hasCreatedByUser = Boolean(getCreatedByUser());
743
+ const isScheduled = release.scheduledAt && release.timezone;
744
+ const numberOfEntriesText = formatMessage(
745
+ {
746
+ id: "content-releases.pages.Details.header-subtitle",
747
+ defaultMessage: "{number, plural, =0 {No entries} one {# entry} other {# entries}}"
748
+ },
749
+ { number: totalEntries }
750
+ );
751
+ const scheduledText = isScheduled ? formatMessage(
752
+ {
753
+ id: "content-releases.pages.ReleaseDetails.header-subtitle.scheduled",
754
+ defaultMessage: "Scheduled for {date} at {time} ({offset})"
755
+ },
756
+ {
757
+ date: formatDate(new Date(release.scheduledAt), {
758
+ weekday: "long",
759
+ day: "numeric",
760
+ month: "long",
761
+ year: "numeric",
762
+ timeZone: release.timezone
763
+ }),
764
+ time: formatTime(new Date(release.scheduledAt), {
765
+ timeZone: release.timezone,
766
+ hourCycle: "h23"
767
+ }),
768
+ offset: getTimezoneOffset(release.timezone, new Date(release.scheduledAt))
769
+ }
770
+ ) : "";
255
771
  return /* @__PURE__ */ jsxs(Main, { "aria-busy": isLoadingDetails, children: [
256
772
  /* @__PURE__ */ jsx(
257
773
  HeaderLayout,
258
774
  {
259
775
  title: release.name,
260
- subtitle: formatMessage(
261
- {
262
- id: "content-releases.pages.Details.header-subtitle",
263
- defaultMessage: "{number, plural, =0 {No entries} one {# entry} other {# entries}}"
264
- },
265
- { number: totalEntries }
266
- ),
267
- navigationAction: /* @__PURE__ */ jsx(Link, { startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}), to: "/plugins/content-releases", children: formatMessage({
776
+ subtitle: /* @__PURE__ */ jsxs(Flex, { gap: 2, lineHeight: 6, children: [
777
+ /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", children: numberOfEntriesText + (isScheduled ? ` - ${scheduledText}` : "") }),
778
+ /* @__PURE__ */ jsx(Badge, { ...getBadgeProps(release.status), children: release.status })
779
+ ] }),
780
+ navigationAction: /* @__PURE__ */ jsx(Link$1, { startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}), to: "/plugins/content-releases", children: formatMessage({
268
781
  id: "global.back",
269
782
  defaultMessage: "Back"
270
783
  }) }),
@@ -294,42 +807,28 @@ const ReleaseDetailsLayout = ({
294
807
  padding: 1,
295
808
  width: "100%",
296
809
  children: [
297
- /* @__PURE__ */ jsx(StyledMenuItem, { disabled: !canUpdate, onSelect: toggleEditReleaseModal, children: /* @__PURE__ */ jsxs(
298
- Flex,
299
- {
300
- paddingTop: 2,
301
- paddingBottom: 2,
302
- alignItems: "center",
303
- gap: 2,
304
- hasRadius: true,
305
- width: "100%",
306
- children: [
307
- /* @__PURE__ */ jsx(PencilIcon, {}),
308
- /* @__PURE__ */ jsx(Typography, { ellipsis: true, children: formatMessage({
309
- id: "content-releases.header.actions.edit",
310
- defaultMessage: "Edit"
311
- }) })
312
- ]
313
- }
314
- ) }),
315
- /* @__PURE__ */ jsx(StyledMenuItem, { disabled: !canDelete, onSelect: toggleWarningSubmit, children: /* @__PURE__ */ jsxs(
316
- Flex,
810
+ /* @__PURE__ */ jsx(StyledMenuItem, { disabled: !canUpdate, onSelect: toggleEditReleaseModal, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, hasRadius: true, width: "100%", children: [
811
+ /* @__PURE__ */ jsx(PencilIcon, {}),
812
+ /* @__PURE__ */ jsx(Typography, { ellipsis: true, children: formatMessage({
813
+ id: "content-releases.header.actions.edit",
814
+ defaultMessage: "Edit"
815
+ }) })
816
+ ] }) }),
817
+ /* @__PURE__ */ jsx(
818
+ StyledMenuItem,
317
819
  {
318
- paddingTop: 2,
319
- paddingBottom: 2,
320
- alignItems: "center",
321
- gap: 2,
322
- hasRadius: true,
323
- width: "100%",
324
- children: [
820
+ disabled: !canDelete,
821
+ onSelect: toggleWarningSubmit,
822
+ variant: "danger",
823
+ children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, hasRadius: true, width: "100%", children: [
325
824
  /* @__PURE__ */ jsx(TrashIcon, {}),
326
825
  /* @__PURE__ */ jsx(Typography, { ellipsis: true, textColor: "danger600", children: formatMessage({
327
826
  id: "content-releases.header.actions.delete",
328
827
  defaultMessage: "Delete"
329
828
  }) })
330
- ]
829
+ ] })
331
830
  }
332
- ) })
831
+ )
333
832
  ]
334
833
  }
335
834
  ),
@@ -347,7 +846,7 @@ const ReleaseDetailsLayout = ({
347
846
  defaultMessage: "Created"
348
847
  }) }),
349
848
  /* @__PURE__ */ jsxs(Typography, { variant: "pi", color: "neutral300", children: [
350
- /* @__PURE__ */ jsx(RelativeTime, { timestamp: new Date(release.createdAt) }),
849
+ /* @__PURE__ */ jsx(RelativeTime$1, { timestamp: new Date(release.createdAt) }),
351
850
  formatMessage(
352
851
  {
353
852
  id: "content-releases.header.actions.created.description",
@@ -386,6 +885,7 @@ const ReleaseDetailsLayout = ({
386
885
  ] });
387
886
  };
388
887
  const GROUP_BY_OPTIONS = ["contentType", "locale", "action"];
888
+ const GROUP_BY_OPTIONS_NO_LOCALE = ["contentType", "action"];
389
889
  const getGroupByOptionLabel = (value) => {
390
890
  if (value === "locale") {
391
891
  return {
@@ -404,6 +904,21 @@ const getGroupByOptionLabel = (value) => {
404
904
  defaultMessage: "Content-Types"
405
905
  };
406
906
  };
907
+ const DEFAULT_RELEASE_DETAILS_HEADER = [
908
+ {
909
+ key: "__name__",
910
+ fieldSchema: { type: "string" },
911
+ metadatas: {
912
+ label: {
913
+ id: "content-releases.page.ReleaseDetails.table.header.label.name",
914
+ defaultMessage: "name"
915
+ },
916
+ searchable: false,
917
+ sortable: false
918
+ },
919
+ name: "name"
920
+ }
921
+ ];
407
922
  const ReleaseDetailsBody = () => {
408
923
  const { formatMessage } = useIntl();
409
924
  const { releaseId } = useParams();
@@ -419,6 +934,17 @@ const ReleaseDetailsBody = () => {
419
934
  const {
420
935
  allowedActions: { canUpdate }
421
936
  } = useRBAC(PERMISSIONS);
937
+ const { runHookWaterfall } = useStrapiApp();
938
+ const {
939
+ displayedHeaders,
940
+ hasI18nEnabled
941
+ } = runHookWaterfall(
942
+ "ContentReleases/pages/ReleaseDetails/add-locale-in-releases",
943
+ {
944
+ displayedHeaders: DEFAULT_RELEASE_DETAILS_HEADER,
945
+ hasI18nEnabled: false
946
+ }
947
+ );
422
948
  const release = releaseData?.data;
423
949
  const selectedGroupBy = query?.groupBy || "contentType";
424
950
  const {
@@ -505,7 +1031,7 @@ const ReleaseDetailsBody = () => {
505
1031
  action: /* @__PURE__ */ jsx(
506
1032
  LinkButton,
507
1033
  {
508
- as: Link$1,
1034
+ as: Link$2,
509
1035
  to: {
510
1036
  pathname: "/content-manager"
511
1037
  },
@@ -520,6 +1046,7 @@ const ReleaseDetailsBody = () => {
520
1046
  }
521
1047
  ) });
522
1048
  }
1049
+ const options = hasI18nEnabled ? GROUP_BY_OPTIONS : GROUP_BY_OPTIONS_NO_LOCALE;
523
1050
  return /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsxs(Flex, { gap: 8, direction: "column", alignItems: "stretch", children: [
524
1051
  /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
525
1052
  SingleSelect,
@@ -539,7 +1066,7 @@ const ReleaseDetailsBody = () => {
539
1066
  ),
540
1067
  value: formatMessage(getGroupByOptionLabel(selectedGroupBy)),
541
1068
  onChange: (value) => setQuery({ groupBy: value }),
542
- children: GROUP_BY_OPTIONS.map((option) => /* @__PURE__ */ jsx(SingleSelectOption, { value: option, children: formatMessage(getGroupByOptionLabel(option)) }, option))
1069
+ children: options.map((option) => /* @__PURE__ */ jsx(SingleSelectOption, { value: option, children: formatMessage(getGroupByOptionLabel(option)) }, option))
543
1070
  }
544
1071
  ) }),
545
1072
  Object.keys(releaseActions).map((key) => /* @__PURE__ */ jsxs(Flex, { gap: 4, direction: "column", alignItems: "stretch", children: [
@@ -554,30 +1081,17 @@ const ReleaseDetailsBody = () => {
554
1081
  colCount: releaseActions[key].length,
555
1082
  isLoading,
556
1083
  isFetching,
557
- children: /* @__PURE__ */ jsxs(Table.Content, { children: [
558
- /* @__PURE__ */ jsxs(Table.Head, { children: [
559
- /* @__PURE__ */ jsx(
560
- Table.HeaderCell,
561
- {
562
- fieldSchemaType: "string",
563
- label: formatMessage({
564
- id: "content-releases.page.ReleaseDetails.table.header.label.name",
565
- defaultMessage: "name"
566
- }),
567
- name: "name"
568
- }
569
- ),
570
- /* @__PURE__ */ jsx(
571
- Table.HeaderCell,
572
- {
573
- fieldSchemaType: "string",
574
- label: formatMessage({
575
- id: "content-releases.page.ReleaseDetails.table.header.label.locale",
576
- defaultMessage: "locale"
577
- }),
578
- name: "locale"
579
- }
580
- ),
1084
+ children: /* @__PURE__ */ jsxs(Table.Content, { children: [
1085
+ /* @__PURE__ */ jsxs(Table.Head, { children: [
1086
+ displayedHeaders.map(({ key: key2, fieldSchema, metadatas, name }) => /* @__PURE__ */ jsx(
1087
+ Table.HeaderCell,
1088
+ {
1089
+ fieldSchemaType: fieldSchema.type,
1090
+ label: formatMessage(metadatas.label),
1091
+ name
1092
+ },
1093
+ key2
1094
+ )),
581
1095
  /* @__PURE__ */ jsx(
582
1096
  Table.HeaderCell,
583
1097
  {
@@ -616,7 +1130,7 @@ const ReleaseDetailsBody = () => {
616
1130
  /* @__PURE__ */ jsx(Table.Body, { children: releaseActions[key].map(
617
1131
  ({ id, contentType, locale, type, entry }, actionIndex) => /* @__PURE__ */ jsxs(Tr, { children: [
618
1132
  /* @__PURE__ */ jsx(Td, { width: "25%", maxWidth: "200px", children: /* @__PURE__ */ jsx(Typography, { ellipsis: true, children: `${contentType.mainFieldValue || entry.id}` }) }),
619
- /* @__PURE__ */ jsx(Td, { width: "10%", children: /* @__PURE__ */ jsx(Typography, { children: `${locale?.name ? locale.name : "-"}` }) }),
1133
+ hasI18nEnabled && /* @__PURE__ */ jsx(Td, { width: "10%", children: /* @__PURE__ */ jsx(Typography, { children: `${locale?.name ? locale.name : "-"}` }) }),
620
1134
  /* @__PURE__ */ jsx(Td, { width: "10%", children: /* @__PURE__ */ jsx(Typography, { children: contentType.displayName || "" }) }),
621
1135
  /* @__PURE__ */ jsx(Td, { width: "20%", children: release.releasedAt ? /* @__PURE__ */ jsx(Typography, { children: formatMessage(
622
1136
  {
@@ -688,7 +1202,7 @@ const ReleaseDetailsPage = () => {
688
1202
  const { releaseId } = useParams();
689
1203
  const toggleNotification = useNotification();
690
1204
  const { formatAPIError } = useAPIErrorHandler();
691
- const { push } = useHistory();
1205
+ const { replace } = useHistory();
692
1206
  const [releaseModalShown, setReleaseModalShown] = React.useState(false);
693
1207
  const [showWarningSubmit, setWarningSubmit] = React.useState(false);
694
1208
  const {
@@ -712,11 +1226,18 @@ const ReleaseDetailsPage = () => {
712
1226
  }
713
1227
  );
714
1228
  }
715
- const title = isSuccessDetails && data?.data?.name || "";
1229
+ const releaseData = isSuccessDetails && data?.data || null;
1230
+ const title = releaseData?.name || "";
1231
+ const timezone = releaseData?.timezone ?? null;
1232
+ const scheduledAt = releaseData?.scheduledAt && timezone ? utcToZonedTime(releaseData.scheduledAt, timezone) : null;
1233
+ const date = scheduledAt ? format(scheduledAt, "yyyy-MM-dd") : null;
1234
+ const time = scheduledAt ? format(scheduledAt, "HH:mm") : "";
716
1235
  const handleEditRelease = async (values) => {
717
1236
  const response = await updateRelease({
718
1237
  id: releaseId,
719
- name: values.name
1238
+ name: values.name,
1239
+ scheduledAt: values.scheduledAt,
1240
+ timezone: values.timezone
720
1241
  });
721
1242
  if ("data" in response) {
722
1243
  toggleNotification({
@@ -726,6 +1247,7 @@ const ReleaseDetailsPage = () => {
726
1247
  defaultMessage: "Release updated."
727
1248
  })
728
1249
  });
1250
+ toggleEditReleaseModal();
729
1251
  } else if (isAxiosError(response.error)) {
730
1252
  toggleNotification({
731
1253
  type: "warning",
@@ -737,14 +1259,13 @@ const ReleaseDetailsPage = () => {
737
1259
  message: formatMessage({ id: "notification.error", defaultMessage: "An error occurred" })
738
1260
  });
739
1261
  }
740
- toggleEditReleaseModal();
741
1262
  };
742
1263
  const handleDeleteRelease = async () => {
743
1264
  const response = await deleteRelease({
744
1265
  id: releaseId
745
1266
  });
746
1267
  if ("data" in response) {
747
- push("/plugins/content-releases");
1268
+ replace("/plugins/content-releases");
748
1269
  } else if (isAxiosError(response.error)) {
749
1270
  toggleNotification({
750
1271
  type: "warning",
@@ -770,7 +1291,14 @@ const ReleaseDetailsPage = () => {
770
1291
  handleClose: toggleEditReleaseModal,
771
1292
  handleSubmit: handleEditRelease,
772
1293
  isLoading: isLoadingDetails || isSubmittingForm,
773
- initialValues: { name: title || "" }
1294
+ initialValues: {
1295
+ name: title || "",
1296
+ scheduledAt,
1297
+ date,
1298
+ time,
1299
+ isScheduled: Boolean(scheduledAt),
1300
+ timezone
1301
+ }
774
1302
  }
775
1303
  ),
776
1304
  /* @__PURE__ */ jsx(
@@ -790,281 +1318,6 @@ const ReleaseDetailsPage = () => {
790
1318
  }
791
1319
  );
792
1320
  };
793
- const LinkCard = styled(Link$2)`
794
- display: block;
795
- `;
796
- const ReleasesGrid = ({ sectionTitle, releases = [], isError = false }) => {
797
- const { formatMessage } = useIntl();
798
- if (isError) {
799
- return /* @__PURE__ */ jsx(AnErrorOccurred, {});
800
- }
801
- if (releases?.length === 0) {
802
- return /* @__PURE__ */ jsx(
803
- EmptyStateLayout,
804
- {
805
- content: formatMessage(
806
- {
807
- id: "content-releases.page.Releases.tab.emptyEntries",
808
- defaultMessage: "No releases"
809
- },
810
- {
811
- target: sectionTitle
812
- }
813
- ),
814
- icon: /* @__PURE__ */ jsx(EmptyDocuments, { width: "10rem" })
815
- }
816
- );
817
- }
818
- return /* @__PURE__ */ jsx(Grid, { gap: 4, children: releases.map(({ id, name, actions }) => /* @__PURE__ */ jsx(GridItem, { col: 3, s: 6, xs: 12, children: /* @__PURE__ */ jsx(LinkCard, { href: `content-releases/${id}`, isExternal: false, children: /* @__PURE__ */ jsxs(
819
- Flex,
820
- {
821
- direction: "column",
822
- justifyContent: "space-between",
823
- padding: 4,
824
- hasRadius: true,
825
- background: "neutral0",
826
- shadow: "tableShadow",
827
- height: "100%",
828
- width: "100%",
829
- alignItems: "start",
830
- gap: 2,
831
- children: [
832
- /* @__PURE__ */ jsx(Typography, { as: "h3", variant: "delta", fontWeight: "bold", children: name }),
833
- /* @__PURE__ */ jsx(Typography, { variant: "pi", children: formatMessage(
834
- {
835
- id: "content-releases.page.Releases.release-item.entries",
836
- defaultMessage: "{number, plural, =0 {No entries} one {# entry} other {# entries}}"
837
- },
838
- { number: actions.meta.count }
839
- ) })
840
- ]
841
- }
842
- ) }) }, id)) });
843
- };
844
- const StyledAlert = styled(Alert)`
845
- button {
846
- display: none;
847
- }
848
- p + div {
849
- margin-left: auto;
850
- }
851
- `;
852
- const INITIAL_FORM_VALUES = {
853
- name: ""
854
- };
855
- const ReleasesPage = () => {
856
- const tabRef = React.useRef(null);
857
- const location = useLocation();
858
- const [releaseModalShown, setReleaseModalShown] = React.useState(false);
859
- const toggleNotification = useNotification();
860
- const { formatMessage } = useIntl();
861
- const { push, replace } = useHistory();
862
- const { formatAPIError } = useAPIErrorHandler();
863
- const [{ query }, setQuery] = useQueryParams();
864
- const response = useGetReleasesQuery(query);
865
- const [createRelease, { isLoading: isSubmittingForm }] = useCreateReleaseMutation();
866
- const { getFeature } = useLicenseLimits();
867
- const { maximumReleases = 3 } = getFeature("cms-content-releases");
868
- const { trackUsage } = useTracking();
869
- const { isLoading, isSuccess, isError } = response;
870
- const activeTab = response?.currentData?.meta?.activeTab || "pending";
871
- const activeTabIndex = ["pending", "done"].indexOf(activeTab);
872
- React.useEffect(() => {
873
- if (location?.state?.errors) {
874
- toggleNotification({
875
- type: "warning",
876
- title: formatMessage({
877
- id: "content-releases.pages.Releases.notification.error.title",
878
- defaultMessage: "Your request could not be processed."
879
- }),
880
- message: formatMessage({
881
- id: "content-releases.pages.Releases.notification.error.message",
882
- defaultMessage: "Please try again or open another release."
883
- })
884
- });
885
- replace({ state: null });
886
- }
887
- }, [formatMessage, location?.state?.errors, replace, toggleNotification]);
888
- React.useEffect(() => {
889
- if (tabRef.current) {
890
- tabRef.current._handlers.setSelectedTabIndex(activeTabIndex);
891
- }
892
- }, [activeTabIndex]);
893
- const toggleAddReleaseModal = () => {
894
- setReleaseModalShown((prev) => !prev);
895
- };
896
- if (isLoading) {
897
- return /* @__PURE__ */ jsx(Main, { "aria-busy": isLoading, children: /* @__PURE__ */ jsx(LoadingIndicatorPage, {}) });
898
- }
899
- const totalReleases = isSuccess && response.currentData?.meta?.pagination?.total || 0;
900
- const hasReachedMaximumPendingReleases = totalReleases >= maximumReleases;
901
- const handleTabChange = (index) => {
902
- setQuery({
903
- ...query,
904
- page: 1,
905
- pageSize: response?.currentData?.meta?.pagination?.pageSize || 16,
906
- filters: {
907
- releasedAt: {
908
- $notNull: index === 0 ? false : true
909
- }
910
- }
911
- });
912
- };
913
- const handleAddRelease = async (values) => {
914
- const response2 = await createRelease({
915
- name: values.name
916
- });
917
- if ("data" in response2) {
918
- toggleNotification({
919
- type: "success",
920
- message: formatMessage({
921
- id: "content-releases.modal.release-created-notification-success",
922
- defaultMessage: "Release created."
923
- })
924
- });
925
- trackUsage("didCreateRelease");
926
- push(`/plugins/content-releases/${response2.data.data.id}`);
927
- } else if (isAxiosError(response2.error)) {
928
- toggleNotification({
929
- type: "warning",
930
- message: formatAPIError(response2.error)
931
- });
932
- } else {
933
- toggleNotification({
934
- type: "warning",
935
- message: formatMessage({ id: "notification.error", defaultMessage: "An error occurred" })
936
- });
937
- }
938
- };
939
- return /* @__PURE__ */ jsxs(Main, { "aria-busy": isLoading, children: [
940
- /* @__PURE__ */ jsx(
941
- HeaderLayout,
942
- {
943
- title: formatMessage({
944
- id: "content-releases.pages.Releases.title",
945
- defaultMessage: "Releases"
946
- }),
947
- subtitle: formatMessage(
948
- {
949
- id: "content-releases.pages.Releases.header-subtitle",
950
- defaultMessage: "{number, plural, =0 {No releases} one {# release} other {# releases}}"
951
- },
952
- { number: totalReleases }
953
- ),
954
- primaryAction: /* @__PURE__ */ jsx(CheckPermissions, { permissions: PERMISSIONS.create, children: /* @__PURE__ */ jsx(
955
- Button,
956
- {
957
- startIcon: /* @__PURE__ */ jsx(Plus, {}),
958
- onClick: toggleAddReleaseModal,
959
- disabled: hasReachedMaximumPendingReleases,
960
- children: formatMessage({
961
- id: "content-releases.header.actions.add-release",
962
- defaultMessage: "New release"
963
- })
964
- }
965
- ) })
966
- }
967
- ),
968
- /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
969
- activeTab === "pending" && hasReachedMaximumPendingReleases && /* @__PURE__ */ jsx(
970
- StyledAlert,
971
- {
972
- marginBottom: 6,
973
- action: /* @__PURE__ */ jsx(Link$2, { href: "https://strapi.io/pricing-cloud", isExternal: true, children: formatMessage({
974
- id: "content-releases.pages.Releases.max-limit-reached.action",
975
- defaultMessage: "Explore plans"
976
- }) }),
977
- title: formatMessage(
978
- {
979
- id: "content-releases.pages.Releases.max-limit-reached.title",
980
- defaultMessage: "You have reached the {number} pending {number, plural, one {release} other {releases}} limit."
981
- },
982
- { number: maximumReleases }
983
- ),
984
- onClose: () => {
985
- },
986
- closeLabel: "",
987
- children: formatMessage({
988
- id: "content-releases.pages.Releases.max-limit-reached.message",
989
- defaultMessage: "Upgrade to manage an unlimited number of releases."
990
- })
991
- }
992
- ),
993
- /* @__PURE__ */ jsxs(
994
- TabGroup,
995
- {
996
- label: formatMessage({
997
- id: "content-releases.pages.Releases.tab-group.label",
998
- defaultMessage: "Releases list"
999
- }),
1000
- variant: "simple",
1001
- initialSelectedTabIndex: activeTabIndex,
1002
- onTabChange: handleTabChange,
1003
- ref: tabRef,
1004
- children: [
1005
- /* @__PURE__ */ jsxs(Box, { paddingBottom: 8, children: [
1006
- /* @__PURE__ */ jsxs(Tabs, { children: [
1007
- /* @__PURE__ */ jsx(Tab, { children: formatMessage({
1008
- id: "content-releases.pages.Releases.tab.pending",
1009
- defaultMessage: "Pending"
1010
- }) }),
1011
- /* @__PURE__ */ jsx(Tab, { children: formatMessage({
1012
- id: "content-releases.pages.Releases.tab.done",
1013
- defaultMessage: "Done"
1014
- }) })
1015
- ] }),
1016
- /* @__PURE__ */ jsx(Divider, {})
1017
- ] }),
1018
- /* @__PURE__ */ jsxs(TabPanels, { children: [
1019
- /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
1020
- ReleasesGrid,
1021
- {
1022
- sectionTitle: "pending",
1023
- releases: response?.currentData?.data,
1024
- isError
1025
- }
1026
- ) }),
1027
- /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
1028
- ReleasesGrid,
1029
- {
1030
- sectionTitle: "done",
1031
- releases: response?.currentData?.data,
1032
- isError
1033
- }
1034
- ) })
1035
- ] })
1036
- ]
1037
- }
1038
- ),
1039
- totalReleases > 0 && /* @__PURE__ */ jsxs(Flex, { paddingTop: 4, alignItems: "flex-end", justifyContent: "space-between", children: [
1040
- /* @__PURE__ */ jsx(
1041
- PageSizeURLQuery,
1042
- {
1043
- options: ["8", "16", "32", "64"],
1044
- defaultValue: response?.currentData?.meta?.pagination?.pageSize.toString()
1045
- }
1046
- ),
1047
- /* @__PURE__ */ jsx(
1048
- PaginationURLQuery,
1049
- {
1050
- pagination: {
1051
- pageCount: response?.currentData?.meta?.pagination?.pageCount || 0
1052
- }
1053
- }
1054
- )
1055
- ] })
1056
- ] }) }),
1057
- releaseModalShown && /* @__PURE__ */ jsx(
1058
- ReleaseModal,
1059
- {
1060
- handleClose: toggleAddReleaseModal,
1061
- handleSubmit: handleAddRelease,
1062
- isLoading: isSubmittingForm,
1063
- initialValues: INITIAL_FORM_VALUES
1064
- }
1065
- )
1066
- ] });
1067
- };
1068
1321
  const App = () => {
1069
1322
  return /* @__PURE__ */ jsx(CheckPagePermissions, { permissions: PERMISSIONS.main, children: /* @__PURE__ */ jsxs(Switch, { children: [
1070
1323
  /* @__PURE__ */ jsx(Route, { exact: true, path: `/plugins/${pluginId}`, component: ReleasesPage }),
@@ -1074,4 +1327,4 @@ const App = () => {
1074
1327
  export {
1075
1328
  App
1076
1329
  };
1077
- //# sourceMappingURL=App-U6GbyLIE.mjs.map
1330
+ //# sourceMappingURL=App-jrh58sXY.mjs.map