Skip to content

Commit 87287bb

Browse files
gregorydlogangregorydlogan
committed
Merge branch 'cleanup-notifications' of Arnei/opencast-admin-interface into main
Pull request #1161 Unify notifications
2 parents edaafbe + 4a41a82 commit 87287bb

15 files changed

+153
-139
lines changed

‎src/components/events/partials/ModalTabsAndPages/EventDetailsStatisticsTab.tsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useAppSelector } from "../../../../store";
88
import { fetchEventStatisticsValueUpdate } from "../../../../slices/eventDetailsSlice";
99
import { useTranslation } from "react-i18next";
1010
import { createChartOptions } from "../../../../utils/statisticsUtils";
11+
import { NotificationComponent } from "../../../shared/Notifications";
1112
import { ParseKeys } from "i18next";
1213
import ModalContentTable from "../../../shared/modals/ModalContentTable";
1314

@@ -40,9 +41,13 @@ const EventDetailsStatisticsTab = ({
4041
/* error message */
4142
<div className="obj">
4243
<header>{t(header) /* Statistics */}</header>
43-
<div className="modal-alert danger">
44-
{t("STATISTICS.NOT_AVAILABLE")}
45-
</div>
44+
<NotificationComponent
45+
notification={{
46+
type: "error",
47+
message: "STATISTICS.NOT_AVAILABLE",
48+
id: 0,
49+
}}
50+
/>
4651
</div>
4752
) : (
4853
/* iterates over the different available statistics */
@@ -74,9 +79,13 @@ const EventDetailsStatisticsTab = ({
7479
</div>
7580
) : (
7681
/* unsupported type message */
77-
<div className="modal-alert danger">
78-
{t("STATISTICS.UNSUPPORTED_TYPE")}
79-
</div>
82+
<NotificationComponent
83+
notification={{
84+
type: "error",
85+
message: "STATISTICS.UNSUPPORTED_TYPE",
86+
id: 0,
87+
}}
88+
/>
8089
)}
8190
</div>
8291
))

‎src/components/events/partials/ModalTabsAndPages/SeriesDetailsStatisticTab.tsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { fetchSeriesStatisticsValueUpdate } from "../../../../slices/seriesDetai
88
import TimeSeriesStatistics from "../../../shared/TimeSeriesStatistics";
99
import { useAppSelector } from "../../../../store";
1010
import { createChartOptions } from "../../../../utils/statisticsUtils";
11+
import { NotificationComponent } from "../../../shared/Notifications";
1112
import { ParseKeys } from "i18next";
1213
import ModalContentTable from "../../../shared/modals/ModalContentTable";
1314

@@ -37,9 +38,13 @@ const SeriesDetailsStatisticTab = ({
3738
/* error message */
3839
<div className="obj">
3940
<header>{t(header) /* Statistics */}</header>
40-
<div className="modal-alert danger">
41-
{t("STATISTICS.NOT_AVAILABLE")}
42-
</div>
41+
<NotificationComponent
42+
notification={{
43+
type: "error",
44+
message: "STATISTICS.NOT_AVAILABLE",
45+
id: 0,
46+
}}
47+
/>
4348
</div>
4449
) : (
4550
/* iterates over the different available statistics */
@@ -71,9 +76,13 @@ const SeriesDetailsStatisticTab = ({
7176
</div>
7277
) : (
7378
/* unsupported type message */
74-
<div className="modal-alert danger">
75-
{t("STATISTICS.UNSUPPORTED_TYPE")}
76-
</div>
79+
<NotificationComponent
80+
notification={{
81+
type: "error",
82+
message: "STATISTICS.UNSUPPORTED_TYPE",
83+
id: 0,
84+
}}
85+
/>
7786
)}
7887
</div>
7988
))

‎src/components/events/partials/SeriesActionsCell.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,11 @@ const SeriesActionsCell = ({
9393
resourceId={row.id}
9494
deleteMethod={deletingSeries}
9595
deleteAllowed={deleteAllowed}
96-
showCautionMessage={hasEvents}
9796
deleteNotAllowedMessage={
9897
"CONFIRMATIONS.ERRORS.SERIES_HAS_EVENTS"
9998
} /* The highlighted series cannot be deleted as they still contain events */
10099
deleteWithCautionMessage={
101-
"CONFIRMATIONS.WARNINGS.SERIES_HAS_EVENTS"
100+
hasEvents ? "CONFIRMATIONS.WARNINGS.SERIES_HAS_EVENTS" : undefined
102101
} /* This series does contain events. Deleting the series will not delete the events. */
103102
modalRef={deleteConfirmationModalRef}
104103
/>

‎src/components/events/partials/modals/DeleteEventsModal.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
55
import { deleteMultipleEvent } from "../../../../slices/eventSlice";
66
import { isEvent } from "../../../../slices/tableSlice";
77
import NavigationButtons from "../../../shared/NavigationButtons";
8+
import { NotificationComponent } from "../../../shared/Notifications";
89
import ModalContentTable from "../../../shared/modals/ModalContentTable";
910

1011
/**
@@ -69,10 +70,13 @@ const DeleteEventsModal = ({
6970
<>
7071
<ModalContentTable modalContentClassName="modal-content active">
7172
<div className="list-obj">
72-
<div className="modal-alert danger obj">
73-
<p>{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE1")}</p>
74-
<p>{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE2")}</p>
75-
</div>
73+
<NotificationComponent
74+
notification={{
75+
type: "error",
76+
message: "BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE1",
77+
id: 0,
78+
}}
79+
/>
7680

7781
<div className="full-col">
7882
<div className="obj">

‎src/components/events/partials/modals/DeleteSeriesModal.tsx

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { availableHotkeys } from "../../../../configs/hotkeysConfig";
1313
import { isSeries } from "../../../../slices/tableSlice";
1414
import ModalContent from "../../../shared/modals/ModalContent";
1515
import NavigationButtons from "../../../shared/NavigationButtons";
16+
import { NotificationComponent } from "../../../shared/Notifications";
1617

1718
/**
1819
* This component manges the delete series bulk action
@@ -128,16 +129,23 @@ const DeleteSeriesModal = ({
128129
return (
129130
<>
130131
<ModalContent>
131-
<div className="modal-alert danger obj">
132-
<p>{t("BULK_ACTIONS.DELETE_SERIES_WARNING_LINE1")}</p>
133-
<p>{t("BULK_ACTIONS.DELETE_SERIES_WARNING_LINE2")}</p>
134-
</div>
132+
<NotificationComponent
133+
notification={{
134+
type: "error",
135+
message: "BULK_ACTIONS.DELETE_SERIES_WARNING_LINE1",
136+
id: 0,
137+
}}
138+
/>
135139

136140
{/* Only show if series not allowed to be deleted */}
137141
{!isAllowed() && (
138-
<div className="alert sticky warning">
139-
<p>{t("BULK_ACTIONS.DELETE.SERIES.CANNOT_DELETE")}</p>
140-
</div>
142+
<NotificationComponent
143+
notification={{
144+
type: "warning",
145+
message: "BULK_ACTIONS.DELETE.SERIES.CANNOT_DELETE",
146+
id: 0,
147+
}}
148+
/>
141149
)}
142150

143151
<div className="full-col">

‎src/components/shared/ActionCellDelete.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,8 @@ export const ActionCellDelete = <T, >({
4747
resourceType={resourceType}
4848
deleteMethod={deleteMethod}
4949
deleteAllowed={deleteAllowed}
50-
showCautionMessage={showCautionMessage}
5150
deleteNotAllowedMessage={deleteNotAllowedMessage}
52-
deleteWithCautionMessage={deleteWithCautionMessage}
51+
deleteWithCautionMessage={showCautionMessage ? deleteWithCautionMessage : undefined}
5352
modalRef={deleteConfirmationModalRef}
5453
/>
5554
</>

‎src/components/shared/ConfirmModal.tsx

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import { useTranslation } from "react-i18next";
33
import { Modal, ModalHandle } from "./modals/Modal";
4+
import { NotificationComponent } from "./Notifications";
45
import { ParseKeys } from "i18next";
56

67
export type ResourceType = "EVENT" | "SERIES" | "LOCATION" | "USER" | "GROUP" | "ACL" | "THEME" | "TOBIRA_PATH";
@@ -12,7 +13,6 @@ const ConfirmModal = <T, >({
1213
resourceId,
1314
deleteMethod,
1415
deleteAllowed = true,
15-
showCautionMessage = false,
1616
deleteNotAllowedMessage,
1717
deleteWithCautionMessage,
1818
modalRef,
@@ -23,7 +23,6 @@ const ConfirmModal = <T, >({
2323
resourceId: T,
2424
deleteMethod: (id: T) => void,
2525
deleteAllowed?: boolean,
26-
showCautionMessage?: boolean,
2726
deleteNotAllowedMessage?: ParseKeys,
2827
deleteWithCautionMessage?: ParseKeys,
2928
modalRef: React.RefObject<ModalHandle | null>
@@ -47,10 +46,14 @@ const ConfirmModal = <T, >({
4746
>
4847
{deleteAllowed ? (
4948
<div>
50-
{showCautionMessage && (
51-
<div className="modal-alert warning">
52-
<p>{deleteWithCautionMessage ? t(deleteWithCautionMessage) : undefined}</p>
53-
</div>
49+
{deleteWithCautionMessage && (
50+
<NotificationComponent
51+
notification={{
52+
type: "warning",
53+
message: deleteWithCautionMessage,
54+
id: 0,
55+
}}
56+
/>
5457
)}
5558

5659
<div>
@@ -85,9 +88,15 @@ const ConfirmModal = <T, >({
8588
</div>
8689
) : (
8790
<div>
88-
<div className="modal-alert danger">
89-
<p>{deleteNotAllowedMessage ? t(deleteNotAllowedMessage) : undefined}</p>
90-
</div>
91+
{deleteNotAllowedMessage && (
92+
<NotificationComponent
93+
notification={{
94+
type: "error",
95+
message: deleteNotAllowedMessage,
96+
id: 0,
97+
}}
98+
/>
99+
)}
91100
<div className="btn-container">
92101
<button
93102
className="cancel-btn close-modal"

‎src/components/shared/Notifications.tsx

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ const Notifications = ({
2424
}: {
2525
context: Context,
2626
}) => {
27-
const { t } = useTranslation();
2827
const dispatch = useAppDispatch();
2928

3029
const notifications = useAppSelector(state => getNotifications(state));
@@ -36,13 +35,10 @@ const Notifications = ({
3635

3736
const renderNotification = (notification: OurNotification, key: number) => (
3837
<li key={key}>
39-
<div className={cn(notification.type, "alert sticky")}>
40-
<ButtonLikeAnchor
41-
onClick={() => closeNotification(notification.id)}
42-
extraClassName="fa fa-times close"
43-
/>
44-
<p>{t(notification.message, notification.parameter)}</p>
45-
</div>
38+
<NotificationComponent
39+
notification={notification}
40+
closeNotification={closeNotification}
41+
/>
4642
</li>
4743
);
4844

@@ -96,4 +92,26 @@ const Notifications = ({
9692
);
9793
};
9894

95+
export const NotificationComponent = ({
96+
notification,
97+
closeNotification,
98+
}: {
99+
notification: Pick<OurNotification, "type" | "id" | "message" | "parameter">,
100+
closeNotification?: (id: number) => unknown
101+
}) => {
102+
const { t } = useTranslation();
103+
104+
return(
105+
<div className={cn(notification.type, "alert sticky")}>
106+
{closeNotification &&
107+
<ButtonLikeAnchor
108+
onClick={() => closeNotification(notification.id)}
109+
extraClassName="fa fa-times close"
110+
/>
111+
}
112+
<p>{t(notification.message, notification.parameter)}</p>
113+
</div>
114+
);
115+
}
116+
99117
export default Notifications;

‎src/components/statistics/Statistics.tsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
fetchStatisticsPageStatisticsValueUpdate,
2222
} from "../../slices/statisticsSlice";
2323
import { createChartOptions } from "../../utils/statisticsUtils";
24+
import { NotificationComponent } from "../shared/Notifications";
2425
import { ParseKeys } from "i18next";
2526

2627
const Statistics: React.FC = () => {
@@ -89,9 +90,13 @@ const Statistics: React.FC = () => {
8990
(hasError || !hasStatistics ? (
9091
/* error message */
9192
<div className="obj">
92-
<div className="modal-alert danger">
93-
{t("STATISTICS.NOT_AVAILABLE")}
94-
</div>
93+
<NotificationComponent
94+
notification={{
95+
type: "error",
96+
message: "STATISTICS.NOT_AVAILABLE",
97+
id: 0,
98+
}}
99+
/>
95100
</div>
96101
) : (
97102
/* iterates over the different available statistics */
@@ -123,9 +128,13 @@ const Statistics: React.FC = () => {
123128
</div>
124129
) : (
125130
/* unsupported type message */
126-
<div className="modal-alert danger">
127-
{t("STATISTICS.UNSUPPORTED_TYPE")}
128-
</div>
131+
<NotificationComponent
132+
notification={{
133+
type: "error",
134+
message: "STATISTICS.UNSUPPORTED_TYPE",
135+
id: 0,
136+
}}
137+
/>
129138
)}
130139
</div>
131140
))

‎src/components/users/partials/wizard/EditUserGeneralTab.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
33
import cn from "classnames";
44
import { Field } from "../../../shared/Field";
55
import { FormikProps } from "formik";
6+
import { NotificationComponent } from "../../../shared/Notifications";
67
import ModalContent from "../../../shared/modals/ModalContent";
78

89
/**
@@ -39,9 +40,13 @@ const EditUserGeneralTab = <T extends RequiredFormProps>({
3940
<ModalContent>
4041
<div className="form-container">
4142
{!formik.values.manageable && (
42-
<div className="modal-alert warning">
43-
<p>{t("NOTIFICATIONS.USER_NOT_MANAGEABLE")}</p>
44-
</div>
43+
<NotificationComponent
44+
notification={{
45+
type: "warning",
46+
message: "NOTIFICATIONS.USER_NOT_MANAGEABLE",
47+
id: 0,
48+
}}
49+
/>
4550
)}
4651
<div className="row" style={editStyle}>
4752
<label>

‎src/components/users/partials/wizard/UserRolesTab.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
22
import { Role, fetchRolesWithTarget } from "../../../../slices/aclSlice";
33
import SelectContainer from "../../../shared/wizard/SelectContainer";
44
import { FormikProps } from "formik";
5+
import { NotificationComponent } from "../../../shared/Notifications";
56
import ModalContent from "../../../shared/modals/ModalContent";
67

78
/**
@@ -35,6 +36,15 @@ const UserRolesTab = <T extends RequiredFormProps>({
3536

3637
return (
3738
<ModalContent>
39+
{!formik.values.manageable && (
40+
<NotificationComponent
41+
notification={{
42+
type: "warning",
43+
message: "NOTIFICATIONS.USER_NOT_MANAGEABLE",
44+
id: 0,
45+
}}
46+
/>
47+
)}
3848
<div className="form-container">
3949
{/*Select container for roles*/}
4050
{!loading && (

0 commit comments

Comments
 (0)