@boomerang-io/carbon-addons-boomerang-react 4.6.11-beta.3 → 4.6.11-beta.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +162 -162
- package/dist/cjs/components/AboutPlatform/AboutPlatform.js +50 -50
- package/dist/cjs/components/AdvantageSideNav/AdvantageSideNav.js +222 -243
- package/dist/cjs/components/AutoSuggest/AutoSuggest.js +101 -101
- package/dist/cjs/components/Avatar/Avatar.js +18 -18
- package/dist/cjs/components/CheckboxList/CheckboxList.js +34 -34
- package/dist/cjs/components/ComboBox/ComboBox.js +103 -103
- package/dist/cjs/components/ComboBoxMultiSelect/ComboBoxMultiSelect.js +32 -32
- package/dist/cjs/components/ComboBoxMultiSelect/MultiSelect.js +208 -208
- package/dist/cjs/components/ComposedModal/ComposedModal.js +80 -80
- package/dist/cjs/components/ConfirmModal/ConfirmModal.js +43 -43
- package/dist/cjs/components/Creatable/Creatable.js +137 -137
- package/dist/cjs/components/DataDrivenInput/DataDrivenInput.js +226 -226
- package/dist/cjs/components/DateInput/DateInput.js +35 -35
- package/dist/cjs/components/DecisionButtons/DecisionButtons.js +61 -61
- package/dist/cjs/components/DelayedRender/DelayedRender.js +17 -17
- package/dist/cjs/components/DynamicFormik/DynamicFormik.js +578 -578
- package/dist/cjs/components/Error403/Error403.js +13 -13
- package/dist/cjs/components/Error403/ForbiddenErrorBackground.js +113 -113
- package/dist/cjs/components/Error403/GraphicWrangler/GraphicWrangler.js +62 -62
- package/dist/cjs/components/Error404/Error404.js +13 -13
- package/dist/cjs/components/Error404/GraphicLoch/GraphicLoch.js +17 -17
- package/dist/cjs/components/Error404/NotFoundErrorBackground.js +129 -129
- package/dist/cjs/components/ErrorBoundary/ErrorBoundary.js +32 -32
- package/dist/cjs/components/ErrorDragon/ErrorDragon.js +13 -13
- package/dist/cjs/components/ErrorDragon/assets/ErrorGraphic.js +35 -35
- package/dist/cjs/components/ErrorFullPage/ErrorFullPage.js +10 -10
- package/dist/cjs/components/ErrorMessage/ErrorMessage.js +22 -22
- package/dist/cjs/components/ErrorPage/ErrorPage.js +11 -11
- package/dist/cjs/components/ErrorPageCore/ErrorPageCore.js +15 -15
- package/dist/cjs/components/ErrorPageCore/GenericErrorBackground.js +124 -124
- package/dist/cjs/components/FeatureHeader/FeatureHeader.js +29 -29
- package/dist/cjs/components/FeatureNavTab/FeatureNavTab.js +12 -12
- package/dist/cjs/components/FeatureNavTabs/FeatureNavTabs.js +12 -12
- package/dist/cjs/components/FeatureSideNav/FeatureSideNav.js +12 -12
- package/dist/cjs/components/FeatureSideNav/FeatureSideNavFooter.js +8 -8
- package/dist/cjs/components/FeatureSideNav/FeatureSideNavHeader.js +8 -8
- package/dist/cjs/components/FeatureSideNav/FeatureSideNavLinks.js +14 -14
- package/dist/cjs/components/FeatureSideNavLink/FeatureSideNavLink.js +12 -12
- package/dist/cjs/components/Feedback/Feedback.js +40 -40
- package/dist/cjs/components/FlowModal/FlowModal.js +141 -141
- package/dist/cjs/components/FlowModal/FlowModalForm.js +12 -12
- package/dist/cjs/components/Header/Header.js +182 -168
- package/dist/cjs/components/Header/HeaderAppSwitcher.js +94 -102
- package/dist/cjs/components/Header/HeaderMenu.js +7 -7
- package/dist/cjs/components/Header/HeaderMenuItem.js +52 -52
- package/dist/cjs/components/Header/HeaderTeamSwitcher.js +326 -0
- package/dist/cjs/components/Header/UserRequests.js +29 -29
- package/dist/cjs/components/ImageModal/ImageModal.js +17 -17
- package/dist/cjs/components/Loading/Loading.js +8 -8
- package/dist/cjs/components/MemberBar/MemberBar.js +20 -20
- package/dist/cjs/components/Modal/Modal.js +20 -20
- package/dist/cjs/components/ModalConfirmEdit/ModalConfirmArray.js +14 -14
- package/dist/cjs/components/ModalConfirmEdit/ModalConfirmDetails.js +11 -11
- package/dist/cjs/components/ModalConfirmEdit/ModalConfirmEdit.js +17 -17
- package/dist/cjs/components/ModalForm/ModalForm.js +9 -9
- package/dist/cjs/components/Notifications/NotificationsContainer.js +22 -22
- package/dist/cjs/components/Notifications/ToastNotification.js +21 -21
- package/dist/cjs/components/Notifications/notify.js +17 -17
- package/dist/cjs/components/PlatformBanner/PlatformBanner.js +8 -8
- package/dist/cjs/components/PlatformNotifications/PlatformNotification.js +17 -17
- package/dist/cjs/components/PlatformNotifications/PlatformNotificationsContainer.js +136 -136
- package/dist/cjs/components/Portal/Portal.js +14 -14
- package/dist/cjs/components/PrivacyRedirect/PrivacyRedirect.js +30 -30
- package/dist/cjs/components/PrivacyStatement/PrivacyStatement.js +90 -90
- package/dist/cjs/components/ProfileSettings/ProfileSettings.js +124 -124
- package/dist/cjs/components/ProtectedRoute/ProtectedRoute.js +13 -13
- package/dist/cjs/components/RadioGroup/RadioGroup.js +33 -33
- package/dist/cjs/components/RichTextArea/RichTextArea.js +142 -142
- package/dist/cjs/components/SignOut/SignOut.js +27 -27
- package/dist/cjs/components/SupportCenter/SupportCenter.js +65 -65
- package/dist/cjs/components/TextArea/TextArea.js +16 -16
- package/dist/cjs/components/TextInput/TextInput.js +13 -13
- package/dist/cjs/components/Toggle/Toggle.js +22 -22
- package/dist/cjs/components/TooltipHover/TooltipHover.js +39 -39
- package/dist/cjs/components/UIShell/UIShell.js +94 -89
- package/dist/cjs/config/servicesConfig.js +21 -21
- package/dist/cjs/constants/DataDrivenInputTypes.js +74 -74
- package/dist/cjs/constants/UserType.js +13 -13
- package/dist/cjs/hooks/useHeaderMenu.js +49 -49
- package/dist/cjs/hooks/usePortal.js +74 -74
- package/dist/cjs/hooks/useWindowSize.js +33 -33
- package/dist/cjs/internal/ListBox/ListBox.js +41 -41
- package/dist/cjs/internal/ListBox/ListBoxField.js +19 -19
- package/dist/cjs/internal/ListBox/ListBoxMenu.js +19 -19
- package/dist/cjs/internal/ListBox/ListBoxMenuIcon.js +31 -31
- package/dist/cjs/internal/ListBox/ListBoxMenuItem.js +38 -38
- package/dist/cjs/internal/ListBox/ListBoxSelection.js +64 -64
- package/dist/cjs/internal/ListBox/index.js +10 -10
- package/dist/cjs/internal/keyboard/keys.js +16 -16
- package/dist/cjs/internal/keyboard/match.js +67 -67
- package/dist/cjs/internal/settings.js +5 -5
- package/dist/cjs/tools/accessibility.js +13 -13
- package/dist/cjs/tools/createPropAdapter.js +44 -44
- package/dist/cjs/tools/isUrl.js +39 -39
- package/dist/cjs/tools/setupGetInstanceId.js +20 -20
- package/dist/cjs/tools/useSetState.js +12 -12
- package/dist/cjs/tools/yupAst/astGenerator.js +212 -212
- package/dist/cjs/tools/yupAst/customValidators.js +17 -17
- package/dist/esm/components/AboutPlatform/AboutPlatform.js +50 -50
- package/dist/esm/components/AdvantageSideNav/AdvantageSideNav.js +224 -245
- package/dist/esm/components/AutoSuggest/AutoSuggest.js +101 -101
- package/dist/esm/components/Avatar/Avatar.js +18 -18
- package/dist/esm/components/CheckboxList/CheckboxList.js +34 -34
- package/dist/esm/components/ComboBox/ComboBox.js +103 -103
- package/dist/esm/components/ComboBoxMultiSelect/ComboBoxMultiSelect.js +32 -32
- package/dist/esm/components/ComboBoxMultiSelect/MultiSelect.js +208 -208
- package/dist/esm/components/ComposedModal/ComposedModal.js +80 -80
- package/dist/esm/components/ConfirmModal/ConfirmModal.js +43 -43
- package/dist/esm/components/Creatable/Creatable.js +137 -137
- package/dist/esm/components/DataDrivenInput/DataDrivenInput.js +226 -226
- package/dist/esm/components/DateInput/DateInput.js +35 -35
- package/dist/esm/components/DecisionButtons/DecisionButtons.js +61 -61
- package/dist/esm/components/DelayedRender/DelayedRender.js +17 -17
- package/dist/esm/components/DynamicFormik/DynamicFormik.js +578 -578
- package/dist/esm/components/Error403/Error403.js +13 -13
- package/dist/esm/components/Error403/ForbiddenErrorBackground.js +113 -113
- package/dist/esm/components/Error403/GraphicWrangler/GraphicWrangler.js +62 -62
- package/dist/esm/components/Error404/Error404.js +13 -13
- package/dist/esm/components/Error404/GraphicLoch/GraphicLoch.js +17 -17
- package/dist/esm/components/Error404/NotFoundErrorBackground.js +129 -129
- package/dist/esm/components/ErrorBoundary/ErrorBoundary.js +32 -32
- package/dist/esm/components/ErrorDragon/ErrorDragon.js +13 -13
- package/dist/esm/components/ErrorDragon/assets/ErrorGraphic.js +35 -35
- package/dist/esm/components/ErrorFullPage/ErrorFullPage.js +10 -10
- package/dist/esm/components/ErrorMessage/ErrorMessage.js +22 -22
- package/dist/esm/components/ErrorPage/ErrorPage.js +11 -11
- package/dist/esm/components/ErrorPageCore/ErrorPageCore.js +15 -15
- package/dist/esm/components/ErrorPageCore/GenericErrorBackground.js +124 -124
- package/dist/esm/components/FeatureHeader/FeatureHeader.js +29 -29
- package/dist/esm/components/FeatureNavTab/FeatureNavTab.js +12 -12
- package/dist/esm/components/FeatureNavTabs/FeatureNavTabs.js +12 -12
- package/dist/esm/components/FeatureSideNav/FeatureSideNav.js +12 -12
- package/dist/esm/components/FeatureSideNav/FeatureSideNavFooter.js +8 -8
- package/dist/esm/components/FeatureSideNav/FeatureSideNavHeader.js +8 -8
- package/dist/esm/components/FeatureSideNav/FeatureSideNavLinks.js +14 -14
- package/dist/esm/components/FeatureSideNavLink/FeatureSideNavLink.js +12 -12
- package/dist/esm/components/Feedback/Feedback.js +40 -40
- package/dist/esm/components/FlowModal/FlowModal.js +141 -141
- package/dist/esm/components/FlowModal/FlowModalForm.js +12 -12
- package/dist/esm/components/Header/Header.js +182 -168
- package/dist/esm/components/Header/HeaderAppSwitcher.js +94 -102
- package/dist/esm/components/Header/HeaderMenu.js +7 -7
- package/dist/esm/components/Header/HeaderMenuItem.js +52 -52
- package/dist/esm/components/Header/HeaderTeamSwitcher.js +317 -0
- package/dist/esm/components/Header/UserRequests.js +29 -29
- package/dist/esm/components/ImageModal/ImageModal.js +17 -17
- package/dist/esm/components/Loading/Loading.js +8 -8
- package/dist/esm/components/MemberBar/MemberBar.js +20 -20
- package/dist/esm/components/Modal/Modal.js +20 -20
- package/dist/esm/components/ModalConfirmEdit/ModalConfirmArray.js +14 -14
- package/dist/esm/components/ModalConfirmEdit/ModalConfirmDetails.js +11 -11
- package/dist/esm/components/ModalConfirmEdit/ModalConfirmEdit.js +17 -17
- package/dist/esm/components/ModalForm/ModalForm.js +9 -9
- package/dist/esm/components/Notifications/NotificationsContainer.js +22 -22
- package/dist/esm/components/Notifications/ToastNotification.js +21 -21
- package/dist/esm/components/Notifications/notify.js +17 -17
- package/dist/esm/components/PlatformBanner/PlatformBanner.js +8 -8
- package/dist/esm/components/PlatformNotifications/PlatformNotification.js +17 -17
- package/dist/esm/components/PlatformNotifications/PlatformNotificationsContainer.js +136 -136
- package/dist/esm/components/Portal/Portal.js +14 -14
- package/dist/esm/components/PrivacyRedirect/PrivacyRedirect.js +30 -30
- package/dist/esm/components/PrivacyStatement/PrivacyStatement.js +90 -90
- package/dist/esm/components/ProfileSettings/ProfileSettings.js +124 -124
- package/dist/esm/components/ProtectedRoute/ProtectedRoute.js +13 -13
- package/dist/esm/components/RadioGroup/RadioGroup.js +33 -33
- package/dist/esm/components/RichTextArea/RichTextArea.js +142 -142
- package/dist/esm/components/SignOut/SignOut.js +27 -27
- package/dist/esm/components/SupportCenter/SupportCenter.js +65 -65
- package/dist/esm/components/TextArea/TextArea.js +16 -16
- package/dist/esm/components/TextInput/TextInput.js +13 -13
- package/dist/esm/components/Toggle/Toggle.js +22 -22
- package/dist/esm/components/TooltipHover/TooltipHover.js +39 -39
- package/dist/esm/components/UIShell/UIShell.js +95 -90
- package/dist/esm/config/servicesConfig.js +21 -21
- package/dist/esm/constants/DataDrivenInputTypes.js +74 -74
- package/dist/esm/constants/UserType.js +13 -13
- package/dist/esm/hooks/useHeaderMenu.js +49 -49
- package/dist/esm/hooks/usePortal.js +74 -74
- package/dist/esm/hooks/useWindowSize.js +33 -33
- package/dist/esm/internal/ListBox/ListBox.js +41 -41
- package/dist/esm/internal/ListBox/ListBoxField.js +19 -19
- package/dist/esm/internal/ListBox/ListBoxMenu.js +19 -19
- package/dist/esm/internal/ListBox/ListBoxMenuIcon.js +31 -31
- package/dist/esm/internal/ListBox/ListBoxMenuItem.js +38 -38
- package/dist/esm/internal/ListBox/ListBoxSelection.js +64 -64
- package/dist/esm/internal/ListBox/index.js +10 -10
- package/dist/esm/internal/keyboard/keys.js +16 -16
- package/dist/esm/internal/keyboard/match.js +67 -67
- package/dist/esm/internal/settings.js +5 -5
- package/dist/esm/tools/accessibility.js +13 -13
- package/dist/esm/tools/createPropAdapter.js +44 -44
- package/dist/esm/tools/isUrl.js +39 -39
- package/dist/esm/tools/setupGetInstanceId.js +20 -20
- package/dist/esm/tools/useSetState.js +12 -12
- package/dist/esm/tools/yupAst/astGenerator.js +212 -212
- package/dist/esm/tools/yupAst/customValidators.js +17 -17
- package/dist/types/index.d.ts +1338 -1309
- package/package.json +167 -167
- package/scss/components/AboutPlatform/_aboutPlatform.scss +139 -139
- package/scss/components/AdvantageSideNav/_advantageSideNav.scss +261 -267
- package/scss/components/AutoSuggest/_autoSuggest.scss +62 -62
- package/scss/components/Avatar/_avatar.scss +32 -32
- package/scss/components/CheckboxList/_checkboxList.scss +26 -26
- package/scss/components/ComboBox/_combobox.scss +23 -23
- package/scss/components/ComboBoxMultiSelect/_comboBoxMultiSelect.scss +53 -53
- package/scss/components/ConfirmModal/_confirmModal.scss +12 -12
- package/scss/components/Creatable/_creatable.scss +48 -48
- package/scss/components/DateInput/_dateInput.scss +36 -36
- package/scss/components/DecisionButtons/_decisionButtons.scss +132 -132
- package/scss/components/DynamicFormik/_dynamicFormik.scss +17 -17
- package/scss/components/ErrorBoundary/_errorBoundary.scss +12 -12
- package/scss/components/ErrorDragon/_errorDragon.scss +55 -55
- package/scss/components/ErrorMessage/_errorMessage.scss +43 -43
- package/scss/components/ErrorPage/_errorPage.scss +66 -66
- package/scss/components/ErrorPageCore/_errorPageCore.scss +73 -73
- package/scss/components/FeatureHeader/_featureHeader.scss +67 -67
- package/scss/components/FeatureNavTab/_featureNavTab.scss +27 -27
- package/scss/components/FeatureSideNav/_featureSideNav.scss +76 -76
- package/scss/components/FeatureSideNavLink/_featureSideNavLink.scss +49 -49
- package/scss/components/Feedback/_feedback.scss +46 -46
- package/scss/components/Header/_header.scss +179 -179
- package/scss/components/Header/_headerAppSwitcher.scss +117 -117
- package/scss/components/Header/_headerMenu.scss +30 -30
- package/scss/components/Header/_headerMenuItem.scss +65 -65
- package/scss/components/Header/_headerTeamSwitcher.scss +195 -0
- package/scss/components/Header/_userRequests.scss +36 -36
- package/scss/components/ImageModal/_imageModal.scss +51 -51
- package/scss/components/MemberBar/_memberBar.scss +99 -99
- package/scss/components/Modal/_modal.scss +163 -163
- package/scss/components/ModalConfirmEdit/_modalConfirmEdit.scss +113 -113
- package/scss/components/Notifications/_notifications.scss +57 -57
- package/scss/components/PlatformBanner/_platformBanner.scss +30 -30
- package/scss/components/PlatformNotifications/_platformNotifications.scss +230 -230
- package/scss/components/PrivacyRedirect/_privacyRedirect.scss +43 -43
- package/scss/components/PrivacyStatement/_privacyStatement.scss +137 -137
- package/scss/components/ProfileSettings/_profileSettings.scss +117 -117
- package/scss/components/ProtectedRoute/_protectedRoute.scss +32 -32
- package/scss/components/RadioGroup/_radioGroup.scss +46 -46
- package/scss/components/RichTextArea/_richTextArea.scss +82 -82
- package/scss/components/SignOut/_signOut.scss +51 -51
- package/scss/components/SupportCenter/_supportCenter.scss +16 -16
- package/scss/components/TextArea/_textArea.scss +19 -19
- package/scss/components/TextInput/_textInput.scss +26 -26
- package/scss/components/Toggle/_toggle.scss +80 -80
- package/scss/components/TooltipHover/_tooltip.scss +48 -48
- package/scss/global/_config.scss +14 -14
- package/scss/global/_tippy.scss +49 -49
- package/scss/global/index.scss +401 -402
- package/scss/global/themes/_boomerang.scss +184 -184
- package/scss/global/themes/_default.scss +79 -79
- package/scss/global/themes/_shell-tokens.scss +42 -42
- package/scss/global/utils/_animations.scss +15 -15
- package/scss/global/utils/_mixins.scss +67 -67
- package/scss/global/utils/index.scss +10 -10
|
@@ -4,23 +4,23 @@ import ModalConfirmDetails from './ModalConfirmDetails.js';
|
|
|
4
4
|
import ModalConfirmArray from './ModalConfirmArray.js';
|
|
5
5
|
import { prefix } from '../../internal/settings.js';
|
|
6
6
|
|
|
7
|
-
/*
|
|
8
|
-
IBM Confidential
|
|
9
|
-
694970X, 69497O0
|
|
10
|
-
© Copyright IBM Corp. 2022, 2024
|
|
11
|
-
*/
|
|
12
|
-
const TYPES = {
|
|
13
|
-
DETAILS: "details",
|
|
14
|
-
ARRAY: "array",
|
|
15
|
-
};
|
|
16
|
-
function ModalConfirmEdit({ items, onEdit, style, title = "Confirm Your Details", type = "details", ...rest }) {
|
|
17
|
-
return (React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-edit`, style: style, ...rest },
|
|
18
|
-
React.createElement("p", { className: `${prefix}--bmrg-modal-confirm-edit__title` }, title),
|
|
19
|
-
React.createElement("section", { className: `${prefix}--bmrg-modal-confirm-edit__section` },
|
|
20
|
-
React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-edit__content` },
|
|
21
|
-
type === TYPES.DETAILS ? (React.createElement(ModalConfirmDetails, { items: items })) : type === TYPES.ARRAY ? (React.createElement(ModalConfirmArray, { items: items })) : null,
|
|
22
|
-
typeof onEdit === "function" && (React.createElement("button", { className: `${prefix}--bmrg-modal-confirm-edit__button`, onClick: onEdit },
|
|
23
|
-
React.createElement(Edit, { size: 16, className: `${prefix}--bmrg-modal-confirm-edit__icon`, title: "Edit" })))))));
|
|
7
|
+
/*
|
|
8
|
+
IBM Confidential
|
|
9
|
+
694970X, 69497O0
|
|
10
|
+
© Copyright IBM Corp. 2022, 2024
|
|
11
|
+
*/
|
|
12
|
+
const TYPES = {
|
|
13
|
+
DETAILS: "details",
|
|
14
|
+
ARRAY: "array",
|
|
15
|
+
};
|
|
16
|
+
function ModalConfirmEdit({ items, onEdit, style, title = "Confirm Your Details", type = "details", ...rest }) {
|
|
17
|
+
return (React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-edit`, style: style, ...rest },
|
|
18
|
+
React.createElement("p", { className: `${prefix}--bmrg-modal-confirm-edit__title` }, title),
|
|
19
|
+
React.createElement("section", { className: `${prefix}--bmrg-modal-confirm-edit__section` },
|
|
20
|
+
React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-edit__content` },
|
|
21
|
+
type === TYPES.DETAILS ? (React.createElement(ModalConfirmDetails, { items: items })) : type === TYPES.ARRAY ? (React.createElement(ModalConfirmArray, { items: items })) : null,
|
|
22
|
+
typeof onEdit === "function" && (React.createElement("button", { className: `${prefix}--bmrg-modal-confirm-edit__button`, onClick: onEdit },
|
|
23
|
+
React.createElement(Edit, { size: 16, className: `${prefix}--bmrg-modal-confirm-edit__icon`, title: "Edit" })))))));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export { ModalConfirmEdit as default };
|
|
@@ -2,15 +2,15 @@ import React from 'react';
|
|
|
2
2
|
import cx from 'classnames';
|
|
3
3
|
import { prefix } from '../../internal/settings.js';
|
|
4
4
|
|
|
5
|
-
/*
|
|
6
|
-
IBM Confidential
|
|
7
|
-
694970X, 69497O0
|
|
8
|
-
© Copyright IBM Corp. 2022, 2024
|
|
9
|
-
*/
|
|
10
|
-
const ModalForm = React.forwardRef(function ModalForm({ children, className, element: Element = "form", title, ...rest }, ref) {
|
|
11
|
-
return (React.createElement(Element, { className: cx(`${prefix}--bmrg-modal-form`, className), ...rest, ref: ref },
|
|
12
|
-
title && React.createElement("p", { className: `${prefix}--bmrg-modal-form__title` }, title),
|
|
13
|
-
children));
|
|
5
|
+
/*
|
|
6
|
+
IBM Confidential
|
|
7
|
+
694970X, 69497O0
|
|
8
|
+
© Copyright IBM Corp. 2022, 2024
|
|
9
|
+
*/
|
|
10
|
+
const ModalForm = React.forwardRef(function ModalForm({ children, className, element: Element = "form", title, ...rest }, ref) {
|
|
11
|
+
return (React.createElement(Element, { className: cx(`${prefix}--bmrg-modal-form`, className), ...rest, ref: ref },
|
|
12
|
+
title && React.createElement("p", { className: `${prefix}--bmrg-modal-form__title` }, title),
|
|
13
|
+
children));
|
|
14
14
|
});
|
|
15
15
|
|
|
16
16
|
export { ModalForm as default };
|
|
@@ -4,28 +4,28 @@ import { Close } from '@carbon/react/icons';
|
|
|
4
4
|
import { injectStyle } from 'react-toastify/dist/inject-style';
|
|
5
5
|
import { prefix } from '../../internal/settings.js';
|
|
6
6
|
|
|
7
|
-
/*
|
|
8
|
-
IBM Confidential
|
|
9
|
-
694970X, 69497O0
|
|
10
|
-
© Copyright IBM Corp. 2022, 2024
|
|
11
|
-
*/
|
|
12
|
-
if (typeof window !== "undefined") {
|
|
13
|
-
injectStyle();
|
|
14
|
-
}
|
|
15
|
-
const CloseButton = ({ closeToast }) => React.createElement(Close, { size: 20, onClick: closeToast });
|
|
16
|
-
class NotificationsContainer extends Component {
|
|
17
|
-
static defaultProps = {
|
|
18
|
-
autoClose: 3000,
|
|
19
|
-
closeOnClick: true,
|
|
20
|
-
draggablePercent: 60,
|
|
21
|
-
hideProgressBar: true,
|
|
22
|
-
pauseOnHover: true,
|
|
23
|
-
transition: Slide,
|
|
24
|
-
};
|
|
25
|
-
render() {
|
|
26
|
-
const { autoClose, closeOnClick, draggablePercent, hideProgressBar, pauseOnHover, transition, ...rest } = this.props;
|
|
27
|
-
return (React.createElement(ToastContainer, { className: `${prefix}--bmrg-toastify-container`, autoClose: autoClose, closeButton: React.createElement(CloseButton, null), closeOnClick: closeOnClick, draggablePercent: draggablePercent, hideProgressBar: hideProgressBar, pauseOnHover: pauseOnHover, transition: transition, ...rest }));
|
|
28
|
-
}
|
|
7
|
+
/*
|
|
8
|
+
IBM Confidential
|
|
9
|
+
694970X, 69497O0
|
|
10
|
+
© Copyright IBM Corp. 2022, 2024
|
|
11
|
+
*/
|
|
12
|
+
if (typeof window !== "undefined") {
|
|
13
|
+
injectStyle();
|
|
14
|
+
}
|
|
15
|
+
const CloseButton = ({ closeToast }) => React.createElement(Close, { size: 20, onClick: closeToast });
|
|
16
|
+
class NotificationsContainer extends Component {
|
|
17
|
+
static defaultProps = {
|
|
18
|
+
autoClose: 3000,
|
|
19
|
+
closeOnClick: true,
|
|
20
|
+
draggablePercent: 60,
|
|
21
|
+
hideProgressBar: true,
|
|
22
|
+
pauseOnHover: true,
|
|
23
|
+
transition: Slide,
|
|
24
|
+
};
|
|
25
|
+
render() {
|
|
26
|
+
const { autoClose, closeOnClick, draggablePercent, hideProgressBar, pauseOnHover, transition, ...rest } = this.props;
|
|
27
|
+
return (React.createElement(ToastContainer, { className: `${prefix}--bmrg-toastify-container`, autoClose: autoClose, closeButton: React.createElement(CloseButton, null), closeOnClick: closeOnClick, draggablePercent: draggablePercent, hideProgressBar: hideProgressBar, pauseOnHover: pauseOnHover, transition: transition, ...rest }));
|
|
28
|
+
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
export { NotificationsContainer as default };
|
|
@@ -2,27 +2,27 @@ import React from 'react';
|
|
|
2
2
|
import { ToastNotification as ToastNotification$1 } from '@carbon/react';
|
|
3
3
|
import { prefix } from '../../internal/settings.js';
|
|
4
4
|
|
|
5
|
-
/*
|
|
6
|
-
IBM Confidential
|
|
7
|
-
694970X, 69497O0
|
|
8
|
-
© Copyright IBM Corp. 2022, 2024
|
|
9
|
-
*/
|
|
10
|
-
// eslint-disable no-unused-vars
|
|
11
|
-
ToastNotification.defaultProps = {
|
|
12
|
-
kind: "info",
|
|
13
|
-
title: "",
|
|
14
|
-
subtitle: "",
|
|
15
|
-
caption: undefined,
|
|
16
|
-
role: "alert",
|
|
17
|
-
notificationType: "toast",
|
|
18
|
-
iconDescription: "closes notification",
|
|
19
|
-
onCloseButtonClick: () => { },
|
|
20
|
-
hideCloseButton: true,
|
|
21
|
-
timeout: 1000000,
|
|
22
|
-
};
|
|
23
|
-
function ToastNotification({ iconDescription, closeToast, toastProps, notificationType, ...rest }) {
|
|
24
|
-
return (React.createElement("div", { className: `${prefix}--bmrg-toast-notification-container` },
|
|
25
|
-
React.createElement(ToastNotification$1, { ...rest })));
|
|
5
|
+
/*
|
|
6
|
+
IBM Confidential
|
|
7
|
+
694970X, 69497O0
|
|
8
|
+
© Copyright IBM Corp. 2022, 2024
|
|
9
|
+
*/
|
|
10
|
+
// eslint-disable no-unused-vars
|
|
11
|
+
ToastNotification.defaultProps = {
|
|
12
|
+
kind: "info",
|
|
13
|
+
title: "",
|
|
14
|
+
subtitle: "",
|
|
15
|
+
caption: undefined,
|
|
16
|
+
role: "alert",
|
|
17
|
+
notificationType: "toast",
|
|
18
|
+
iconDescription: "closes notification",
|
|
19
|
+
onCloseButtonClick: () => { },
|
|
20
|
+
hideCloseButton: true,
|
|
21
|
+
timeout: 1000000,
|
|
22
|
+
};
|
|
23
|
+
function ToastNotification({ iconDescription, closeToast, toastProps, notificationType, ...rest }) {
|
|
24
|
+
return (React.createElement("div", { className: `${prefix}--bmrg-toast-notification-container` },
|
|
25
|
+
React.createElement(ToastNotification$1, { ...rest })));
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
export { ToastNotification as default };
|
|
@@ -3,23 +3,23 @@ import { toast } from 'react-toastify';
|
|
|
3
3
|
import { prefix } from '../../internal/settings.js';
|
|
4
4
|
import ToastNotification from './ToastNotification.js';
|
|
5
5
|
|
|
6
|
-
/*
|
|
7
|
-
IBM Confidential
|
|
8
|
-
694970X, 69497O0
|
|
9
|
-
© Copyright IBM Corp. 2022, 2024
|
|
10
|
-
*/
|
|
11
|
-
/** Create notifcation wrapper around react-toastify with default component for basic notification
|
|
12
|
-
* @param {*} notification notifcation content
|
|
13
|
-
* @param {Object} config custom configuration for ToastContainer
|
|
14
|
-
*/
|
|
15
|
-
const notify = (notification, config) => {
|
|
16
|
-
// Check to see if they pass in a component or function
|
|
17
|
-
// Default passing prop to Notification component
|
|
18
|
-
const notificationComponent = typeof notification === "object" || typeof notification === "function" ? (notification) : (React.createElement(ToastNotification, { title: notification }));
|
|
19
|
-
toast(notificationComponent, {
|
|
20
|
-
className: `${prefix}--bmrg--toast-container`,
|
|
21
|
-
...config,
|
|
22
|
-
});
|
|
6
|
+
/*
|
|
7
|
+
IBM Confidential
|
|
8
|
+
694970X, 69497O0
|
|
9
|
+
© Copyright IBM Corp. 2022, 2024
|
|
10
|
+
*/
|
|
11
|
+
/** Create notifcation wrapper around react-toastify with default component for basic notification
|
|
12
|
+
* @param {*} notification notifcation content
|
|
13
|
+
* @param {Object} config custom configuration for ToastContainer
|
|
14
|
+
*/
|
|
15
|
+
const notify = (notification, config) => {
|
|
16
|
+
// Check to see if they pass in a component or function
|
|
17
|
+
// Default passing prop to Notification component
|
|
18
|
+
const notificationComponent = typeof notification === "object" || typeof notification === "function" ? (notification) : (React.createElement(ToastNotification, { title: notification }));
|
|
19
|
+
toast(notificationComponent, {
|
|
20
|
+
className: `${prefix}--bmrg--toast-container`,
|
|
21
|
+
...config,
|
|
22
|
+
});
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
export { notify as default };
|
|
@@ -2,14 +2,14 @@ import React from 'react';
|
|
|
2
2
|
import { InlineNotification } from '@carbon/react';
|
|
3
3
|
import { prefix } from '../../internal/settings.js';
|
|
4
4
|
|
|
5
|
-
/*
|
|
6
|
-
IBM Confidential
|
|
7
|
-
694970X, 69497O0
|
|
8
|
-
© Copyright IBM Corp. 2022, 2024
|
|
9
|
-
*/
|
|
10
|
-
function PlatformBanner({ kind, message, title }) {
|
|
11
|
-
return (React.createElement("div", { className: `${prefix}--bmrg-banner-container` },
|
|
12
|
-
React.createElement(InlineNotification, { kind: kind, subtitle: message, title: title })));
|
|
5
|
+
/*
|
|
6
|
+
IBM Confidential
|
|
7
|
+
694970X, 69497O0
|
|
8
|
+
© Copyright IBM Corp. 2022, 2024
|
|
9
|
+
*/
|
|
10
|
+
function PlatformBanner({ kind, message, title }) {
|
|
11
|
+
return (React.createElement("div", { className: `${prefix}--bmrg-banner-container` },
|
|
12
|
+
React.createElement(InlineNotification, { kind: kind, subtitle: message, title: title })));
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export { PlatformBanner as default };
|
|
@@ -5,23 +5,23 @@ import dayjs from 'dayjs';
|
|
|
5
5
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
|
6
6
|
import { prefix } from '../../internal/settings.js';
|
|
7
7
|
|
|
8
|
-
/*
|
|
9
|
-
IBM Confidential
|
|
10
|
-
694970X, 69497O0
|
|
11
|
-
© Copyright IBM Corp. 2022, 2024
|
|
12
|
-
*/
|
|
13
|
-
dayjs.extend(relativeTime);
|
|
14
|
-
function Notification({ readNotification, data }) {
|
|
15
|
-
return (React.createElement("div", { className: cx(`${prefix}--bmrg-notification`, {
|
|
16
|
-
[`--${data.type}`]: data.type,
|
|
17
|
-
}), "aria-label": `${data.title} notification` },
|
|
18
|
-
React.createElement("div", { className: `${prefix}--bmrg-notification-content` },
|
|
19
|
-
React.createElement("div", { className: `${prefix}--bmrg-notification-content__creator` }, data.creator),
|
|
20
|
-
React.createElement("h2", { className: `${prefix}--bmrg-notification-content__title` }, data.title),
|
|
21
|
-
React.createElement("p", { className: `${prefix}--bmrg-notification-content__desc` }, data.detail),
|
|
22
|
-
React.createElement("time", { className: `${prefix}--bmrg-notification-content__date` }, `${dayjs(data.date).fromNow()} at ${dayjs(data.date).format("hh:mma")}`),
|
|
23
|
-
React.createElement("button", { className: `${prefix}--bmrg-notification-content__close`, onClick: () => readNotification(data.id) },
|
|
24
|
-
React.createElement(Close, { size: 16, title: "Mark as read icon" })))));
|
|
8
|
+
/*
|
|
9
|
+
IBM Confidential
|
|
10
|
+
694970X, 69497O0
|
|
11
|
+
© Copyright IBM Corp. 2022, 2024
|
|
12
|
+
*/
|
|
13
|
+
dayjs.extend(relativeTime);
|
|
14
|
+
function Notification({ readNotification, data }) {
|
|
15
|
+
return (React.createElement("div", { className: cx(`${prefix}--bmrg-notification`, {
|
|
16
|
+
[`--${data.type}`]: data.type,
|
|
17
|
+
}), "aria-label": `${data.title} notification` },
|
|
18
|
+
React.createElement("div", { className: `${prefix}--bmrg-notification-content` },
|
|
19
|
+
React.createElement("div", { className: `${prefix}--bmrg-notification-content__creator` }, data.creator),
|
|
20
|
+
React.createElement("h2", { className: `${prefix}--bmrg-notification-content__title` }, data.title),
|
|
21
|
+
React.createElement("p", { className: `${prefix}--bmrg-notification-content__desc` }, data.detail),
|
|
22
|
+
React.createElement("time", { className: `${prefix}--bmrg-notification-content__date` }, `${dayjs(data.date).fromNow()} at ${dayjs(data.date).format("hh:mma")}`),
|
|
23
|
+
React.createElement("button", { className: `${prefix}--bmrg-notification-content__close`, onClick: () => readNotification(data.id) },
|
|
24
|
+
React.createElement(Close, { size: 16, title: "Mark as read icon" })))));
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
export { Notification as default };
|
|
@@ -4,142 +4,142 @@ import Notification from './PlatformNotification.js';
|
|
|
4
4
|
import cx from 'classnames';
|
|
5
5
|
import { prefix } from '../../internal/settings.js';
|
|
6
6
|
|
|
7
|
-
/*
|
|
8
|
-
IBM Confidential
|
|
9
|
-
694970X, 69497O0
|
|
10
|
-
© Copyright IBM Corp. 2022, 2024
|
|
11
|
-
*/
|
|
12
|
-
class PlatformNotificationsContainer extends React.Component {
|
|
13
|
-
ws;
|
|
14
|
-
articleRef = React.createRef();
|
|
15
|
-
state = {
|
|
16
|
-
error: false,
|
|
17
|
-
currentNotifications: this.props.initialNotifications ?? [],
|
|
18
|
-
numNotifications: this.props.initialNotifications?.length ?? 0,
|
|
19
|
-
};
|
|
20
|
-
componentDidMount() {
|
|
21
|
-
const brokerURL = `${this.props.baseServicesUrl}/notifications/ws`
|
|
22
|
-
.replace("https://", "wss://")
|
|
23
|
-
.replace("http://", "ws://");
|
|
24
|
-
this.ws = new Client({
|
|
25
|
-
brokerURL,
|
|
26
|
-
reconnectDelay: 10000,
|
|
27
|
-
});
|
|
28
|
-
this.ws.onConnect = this.connect;
|
|
29
|
-
this.ws.activate();
|
|
30
|
-
}
|
|
31
|
-
connect = () => {
|
|
32
|
-
this.ws.subscribe("/user/queue/notifications", this.receiveNewNotifications);
|
|
33
|
-
this.ws.subscribe("/user/queue/reply", this.replyRead);
|
|
34
|
-
this.ws.subscribe("/user/queue/all", this.recieveAllUnreadNotifications);
|
|
35
|
-
this.ws.publish({ destination: "/app/all", body: {} });
|
|
36
|
-
};
|
|
37
|
-
componentWillUnmount() {
|
|
38
|
-
this.ws.deactivate();
|
|
39
|
-
}
|
|
40
|
-
/**
|
|
41
|
-
* recieve x amount of new notifications and pass them into state of current notifications
|
|
42
|
-
*
|
|
43
|
-
*/
|
|
44
|
-
receiveNewNotifications = (incomingNotifications) => {
|
|
45
|
-
if (incomingNotifications.body) {
|
|
46
|
-
const data = [JSON.parse(incomingNotifications.body)];
|
|
47
|
-
if (data.length > 0) {
|
|
48
|
-
this.props.setHasNewNotifications(true);
|
|
49
|
-
}
|
|
50
|
-
this.setState((prevState) => ({
|
|
51
|
-
currentNotifications: [...data, ...prevState.currentNotifications],
|
|
52
|
-
numNotifications: prevState.numNotifications + data.length,
|
|
53
|
-
}), () => {
|
|
54
|
-
this.props.setNotificationsCount(this.state.numNotifications);
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
this.setState({
|
|
59
|
-
error: true, // TOOD something here related to the error
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
/**
|
|
64
|
-
* overwrite current notifications, the param represents all unread notifications
|
|
65
|
-
*/
|
|
66
|
-
recieveAllUnreadNotifications = (incomingNotifications) => {
|
|
67
|
-
if (incomingNotifications.body) {
|
|
68
|
-
const jsonData = JSON.parse(incomingNotifications.body);
|
|
69
|
-
const data = jsonData.records;
|
|
70
|
-
if (data.length > 0) {
|
|
71
|
-
this.props.setHasNewNotifications(true);
|
|
72
|
-
}
|
|
73
|
-
else {
|
|
74
|
-
// This has to be declared because this function can be triggered from the notification page in Launchpad
|
|
75
|
-
this.props.setHasNewNotifications(false);
|
|
76
|
-
}
|
|
77
|
-
this.setState({
|
|
78
|
-
currentNotifications: data,
|
|
79
|
-
numNotifications: data.length,
|
|
80
|
-
}, () => {
|
|
81
|
-
this.props.setNotificationsCount(this.state.numNotifications);
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
this.setState({
|
|
86
|
-
error: true, // TOOD something here related to the error
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
};
|
|
90
|
-
/**
|
|
91
|
-
* @param {Object} readResponse - list of notificationIds that have been read
|
|
92
|
-
* the function removes the notifications from current state that are returned as "read"
|
|
93
|
-
*/
|
|
94
|
-
replyRead = (readResponse) => {
|
|
95
|
-
const readIdList = JSON.parse(readResponse.body);
|
|
96
|
-
this.setState((prevState) => ({
|
|
97
|
-
currentNotifications: prevState.currentNotifications.filter((el) => readIdList.indexOf(el.id) === -1),
|
|
98
|
-
numNotifications: prevState.numNotifications - readIdList.length,
|
|
99
|
-
}), () => {
|
|
100
|
-
if (this.state.numNotifications === 0) {
|
|
101
|
-
this.props.setHasNewNotifications(false);
|
|
102
|
-
this.props.setNotificationsCount(0);
|
|
103
|
-
// when we clear out notifications, check to to see if there are new notifications available
|
|
104
|
-
this.ws.publish({ destination: "/app/all", body: {} });
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
};
|
|
108
|
-
/**
|
|
109
|
-
* notificationId - a single notification that the user has marked as read
|
|
110
|
-
* @returns {Function} - makes network request, then after waiting for it to return, setState is called to update currentNotifications and numNotifications
|
|
111
|
-
*/
|
|
112
|
-
handleReadNotification(notificationId) {
|
|
113
|
-
this.ws.publish({
|
|
114
|
-
destination: "/app/read",
|
|
115
|
-
body: JSON.stringify([notificationId]),
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* @returns {Function} - makes network request with all remaining notification IDs, then after waiting for it to return, setState is called to empty out currentNotifications and numNotifications
|
|
120
|
-
*/
|
|
121
|
-
handleReadAllNotifications() {
|
|
122
|
-
const idList = this.state.currentNotifications.map((notification) => notification.id);
|
|
123
|
-
this.ws.publish({ destination: "/app/read", body: JSON.stringify(idList) });
|
|
124
|
-
}
|
|
125
|
-
renderNotifications() {
|
|
126
|
-
return this.state.currentNotifications.slice(0, 5).map((notification) => (React.createElement("li", { key: notification.id, "data-testid": "header-notification" },
|
|
127
|
-
React.createElement(Notification, { readNotification: this.handleReadNotification.bind(this), data: notification }))));
|
|
128
|
-
}
|
|
129
|
-
render() {
|
|
130
|
-
const { numNotifications, currentNotifications } = this.state;
|
|
131
|
-
const { baseEnvUrl } = this.props;
|
|
132
|
-
return (React.createElement("div", { "aria-labelledby": this.props["aria-labelledby"], className: cx(`${prefix}--bmrg-notifications`, {
|
|
133
|
-
"--is-active": this.props.isOpen,
|
|
134
|
-
}), "data-testid": "header-notifications", id: this.props.id, role: "dialog" },
|
|
135
|
-
React.createElement("div", { className: `${prefix}--bmrg-notifications-header` },
|
|
136
|
-
React.createElement("h1", { className: `${prefix}--bmrg-notifications-header__newNotifications` }, `${numNotifications} new notification${numNotifications !== 1 ? "s" : ""}`),
|
|
137
|
-
React.createElement("button", { className: `${prefix}--bmrg-notifications-header__clear`, "data-testid": "header-notifications-all-read", disabled: !currentNotifications.length, onClick: this.handleReadAllNotifications.bind(this), "aria-label": "Mark all read" }, "Mark All Read")),
|
|
138
|
-
React.createElement("ul", { className: `${prefix}--bmrg-notifications__collection` }, currentNotifications.length ? (this.renderNotifications()) : (React.createElement("div", { className: `${prefix}--bmrg-notifications-empty` },
|
|
139
|
-
React.createElement("h1", { className: `${prefix}--bmrg-notifications-empty__no-news` }, "No news is good news, right?")))),
|
|
140
|
-
React.createElement("div", { className: `${prefix}--bmrg-notifications__notifications-footer` },
|
|
141
|
-
React.createElement("a", { "aria-label": "Link for notification center", href: `${baseEnvUrl}/launchpad/notifications`, className: `${prefix}--bmrg-notifications__notifications-redirect-link`, "data-testid": "header-notifications-center-link" }, "Open Notification Center"))));
|
|
142
|
-
}
|
|
7
|
+
/*
|
|
8
|
+
IBM Confidential
|
|
9
|
+
694970X, 69497O0
|
|
10
|
+
© Copyright IBM Corp. 2022, 2024
|
|
11
|
+
*/
|
|
12
|
+
class PlatformNotificationsContainer extends React.Component {
|
|
13
|
+
ws;
|
|
14
|
+
articleRef = React.createRef();
|
|
15
|
+
state = {
|
|
16
|
+
error: false,
|
|
17
|
+
currentNotifications: this.props.initialNotifications ?? [],
|
|
18
|
+
numNotifications: this.props.initialNotifications?.length ?? 0,
|
|
19
|
+
};
|
|
20
|
+
componentDidMount() {
|
|
21
|
+
const brokerURL = `${this.props.baseServicesUrl}/notifications/ws`
|
|
22
|
+
.replace("https://", "wss://")
|
|
23
|
+
.replace("http://", "ws://");
|
|
24
|
+
this.ws = new Client({
|
|
25
|
+
brokerURL,
|
|
26
|
+
reconnectDelay: 10000,
|
|
27
|
+
});
|
|
28
|
+
this.ws.onConnect = this.connect;
|
|
29
|
+
this.ws.activate();
|
|
30
|
+
}
|
|
31
|
+
connect = () => {
|
|
32
|
+
this.ws.subscribe("/user/queue/notifications", this.receiveNewNotifications);
|
|
33
|
+
this.ws.subscribe("/user/queue/reply", this.replyRead);
|
|
34
|
+
this.ws.subscribe("/user/queue/all", this.recieveAllUnreadNotifications);
|
|
35
|
+
this.ws.publish({ destination: "/app/all", body: {} });
|
|
36
|
+
};
|
|
37
|
+
componentWillUnmount() {
|
|
38
|
+
this.ws.deactivate();
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* recieve x amount of new notifications and pass them into state of current notifications
|
|
42
|
+
*
|
|
43
|
+
*/
|
|
44
|
+
receiveNewNotifications = (incomingNotifications) => {
|
|
45
|
+
if (incomingNotifications.body) {
|
|
46
|
+
const data = [JSON.parse(incomingNotifications.body)];
|
|
47
|
+
if (data.length > 0) {
|
|
48
|
+
this.props.setHasNewNotifications(true);
|
|
49
|
+
}
|
|
50
|
+
this.setState((prevState) => ({
|
|
51
|
+
currentNotifications: [...data, ...prevState.currentNotifications],
|
|
52
|
+
numNotifications: prevState.numNotifications + data.length,
|
|
53
|
+
}), () => {
|
|
54
|
+
this.props.setNotificationsCount(this.state.numNotifications);
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
this.setState({
|
|
59
|
+
error: true, // TOOD something here related to the error
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
/**
|
|
64
|
+
* overwrite current notifications, the param represents all unread notifications
|
|
65
|
+
*/
|
|
66
|
+
recieveAllUnreadNotifications = (incomingNotifications) => {
|
|
67
|
+
if (incomingNotifications.body) {
|
|
68
|
+
const jsonData = JSON.parse(incomingNotifications.body);
|
|
69
|
+
const data = jsonData.records;
|
|
70
|
+
if (data.length > 0) {
|
|
71
|
+
this.props.setHasNewNotifications(true);
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
// This has to be declared because this function can be triggered from the notification page in Launchpad
|
|
75
|
+
this.props.setHasNewNotifications(false);
|
|
76
|
+
}
|
|
77
|
+
this.setState({
|
|
78
|
+
currentNotifications: data,
|
|
79
|
+
numNotifications: data.length,
|
|
80
|
+
}, () => {
|
|
81
|
+
this.props.setNotificationsCount(this.state.numNotifications);
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
this.setState({
|
|
86
|
+
error: true, // TOOD something here related to the error
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* @param {Object} readResponse - list of notificationIds that have been read
|
|
92
|
+
* the function removes the notifications from current state that are returned as "read"
|
|
93
|
+
*/
|
|
94
|
+
replyRead = (readResponse) => {
|
|
95
|
+
const readIdList = JSON.parse(readResponse.body);
|
|
96
|
+
this.setState((prevState) => ({
|
|
97
|
+
currentNotifications: prevState.currentNotifications.filter((el) => readIdList.indexOf(el.id) === -1),
|
|
98
|
+
numNotifications: prevState.numNotifications - readIdList.length,
|
|
99
|
+
}), () => {
|
|
100
|
+
if (this.state.numNotifications === 0) {
|
|
101
|
+
this.props.setHasNewNotifications(false);
|
|
102
|
+
this.props.setNotificationsCount(0);
|
|
103
|
+
// when we clear out notifications, check to to see if there are new notifications available
|
|
104
|
+
this.ws.publish({ destination: "/app/all", body: {} });
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
};
|
|
108
|
+
/**
|
|
109
|
+
* notificationId - a single notification that the user has marked as read
|
|
110
|
+
* @returns {Function} - makes network request, then after waiting for it to return, setState is called to update currentNotifications and numNotifications
|
|
111
|
+
*/
|
|
112
|
+
handleReadNotification(notificationId) {
|
|
113
|
+
this.ws.publish({
|
|
114
|
+
destination: "/app/read",
|
|
115
|
+
body: JSON.stringify([notificationId]),
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* @returns {Function} - makes network request with all remaining notification IDs, then after waiting for it to return, setState is called to empty out currentNotifications and numNotifications
|
|
120
|
+
*/
|
|
121
|
+
handleReadAllNotifications() {
|
|
122
|
+
const idList = this.state.currentNotifications.map((notification) => notification.id);
|
|
123
|
+
this.ws.publish({ destination: "/app/read", body: JSON.stringify(idList) });
|
|
124
|
+
}
|
|
125
|
+
renderNotifications() {
|
|
126
|
+
return this.state.currentNotifications.slice(0, 5).map((notification) => (React.createElement("li", { key: notification.id, "data-testid": "header-notification" },
|
|
127
|
+
React.createElement(Notification, { readNotification: this.handleReadNotification.bind(this), data: notification }))));
|
|
128
|
+
}
|
|
129
|
+
render() {
|
|
130
|
+
const { numNotifications, currentNotifications } = this.state;
|
|
131
|
+
const { baseEnvUrl } = this.props;
|
|
132
|
+
return (React.createElement("div", { "aria-labelledby": this.props["aria-labelledby"], className: cx(`${prefix}--bmrg-notifications`, {
|
|
133
|
+
"--is-active": this.props.isOpen,
|
|
134
|
+
}), "data-testid": "header-notifications", id: this.props.id, role: "dialog" },
|
|
135
|
+
React.createElement("div", { className: `${prefix}--bmrg-notifications-header` },
|
|
136
|
+
React.createElement("h1", { className: `${prefix}--bmrg-notifications-header__newNotifications` }, `${numNotifications} new notification${numNotifications !== 1 ? "s" : ""}`),
|
|
137
|
+
React.createElement("button", { className: `${prefix}--bmrg-notifications-header__clear`, "data-testid": "header-notifications-all-read", disabled: !currentNotifications.length, onClick: this.handleReadAllNotifications.bind(this), "aria-label": "Mark all read" }, "Mark All Read")),
|
|
138
|
+
React.createElement("ul", { className: `${prefix}--bmrg-notifications__collection` }, currentNotifications.length ? (this.renderNotifications()) : (React.createElement("div", { className: `${prefix}--bmrg-notifications-empty` },
|
|
139
|
+
React.createElement("h1", { className: `${prefix}--bmrg-notifications-empty__no-news` }, "No news is good news, right?")))),
|
|
140
|
+
React.createElement("div", { className: `${prefix}--bmrg-notifications__notifications-footer` },
|
|
141
|
+
React.createElement("a", { "aria-label": "Link for notification center", href: `${baseEnvUrl}/launchpad/notifications`, className: `${prefix}--bmrg-notifications__notifications-redirect-link`, "data-testid": "header-notifications-center-link" }, "Open Notification Center"))));
|
|
142
|
+
}
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
export { PlatformNotificationsContainer as default };
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { createPortal } from 'react-dom';
|
|
2
2
|
import usePortal from '../../hooks/usePortal.js';
|
|
3
3
|
|
|
4
|
-
/*
|
|
5
|
-
IBM Confidential
|
|
6
|
-
694970X, 69497O0
|
|
7
|
-
© Copyright IBM Corp. 2022, 2024
|
|
8
|
-
*/
|
|
9
|
-
/**
|
|
10
|
-
* @example
|
|
11
|
-
* <Portal>
|
|
12
|
-
* <p>Thinking with portals</p>
|
|
13
|
-
* </Portal>
|
|
14
|
-
*/
|
|
15
|
-
const Portal = ({ id, children }) => {
|
|
16
|
-
const target = usePortal(id);
|
|
17
|
-
return createPortal(children, target);
|
|
4
|
+
/*
|
|
5
|
+
IBM Confidential
|
|
6
|
+
694970X, 69497O0
|
|
7
|
+
© Copyright IBM Corp. 2022, 2024
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* @example
|
|
11
|
+
* <Portal>
|
|
12
|
+
* <p>Thinking with portals</p>
|
|
13
|
+
* </Portal>
|
|
14
|
+
*/
|
|
15
|
+
const Portal = ({ id, children }) => {
|
|
16
|
+
const target = usePortal(id);
|
|
17
|
+
return createPortal(children, target);
|
|
18
18
|
};
|
|
19
19
|
|
|
20
20
|
export { Portal as default };
|