M2-4969: [Admin Panel] Set up Banners infra for system messages

package.json

@@ -71,6 +71,7 @@
  "react-router-dom": "^6.16.0",
  "react-scripts": "5.0.1",
  "react-secure-storage": "^1.3.0",
+ "react-transition-group": "^4.4.5",
  "stream-browserify": "^3.0.0",
  "typescript": "^4.9.5",
  "uuid": "^9.0.1",

src/modules/Auth/layouts/AuthLayout/AuthLayout.tsx

@@ -1,7 +1,8 @@
 import { Outlet } from 'react-router-dom';
 
 import { auth } from 'modules/Auth/state';
-import { Spinner, Svg, Footer, Banner } from 'shared/components';
+import { Spinner, Svg, Footer } from 'shared/components';
+import { Banners } from 'shared/components/Banners';
 
 import {
  StyledAuthLayout,
@@ -22,7 +23,7 @@ export const AuthLayout = () => {
  <StyledLogoWrapper>
  <Svg id="header-logo" width={250} height={44} />
  </StyledLogoWrapper>
- <Banner />
+ <Banners />
  </StyledHeader>
  <StyledOutlet>
  <StyledAuthWrapper>

src/modules/Builder/components/Banners/AppletWithoutChangesBanner/AppletWithoutChangesBanner.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from 'react-i18next';
+
+import { Banner, BannerProps } from 'shared/components/Banners/Banner';
+
+export const AppletWithoutChangesBanner = (props: BannerProps) => {
+ const { t } = useTranslation('app');
+
+ return (
+ <Banner {...props} severity="info">
+ {t('pleaseMakeChangesToApplet')}
+ </Banner>
+ );
+};

src/modules/Builder/components/Banners/AppletWithoutChangesBanner/index.ts

@@ -0,0 +1 @@
+export * from './AppletWithoutChangesBanner';

src/modules/Builder/components/Banners/index.ts

@@ -0,0 +1 @@
+export * from './AppletWithoutChangesBanner';

src/modules/Builder/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Banners';
 export * from './Item';
 export * from './Header';
 export * from './Uploads';

src/modules/Builder/features/SaveAndPublish/SaveAndPublish.hooks.ts

@@ -34,6 +34,7 @@ import {
  FlowReportFieldsPrepareType,
  getEntityReportFields,
 } from 'modules/Builder/utils/getEntityReportFields';
+import { banners } from 'shared/state/Banners';
 
 import {
  getActivityItems,
@@ -256,7 +257,6 @@ export const useUpdatedAppletNavigate = () => {
 export const useSaveAndPublishSetup = (
  hasPrompt: boolean,
  setIsFromLibrary?: Dispatch<SetStateAction<boolean>>,
- setAppletWithoutChangesPopupVisible?: (val: boolean) => void,
 ) => {
  const {
  trigger,
@@ -402,7 +402,7 @@ export const useSaveAndPublishSetup = (
  }
 
  if (!isDirty) {
- setAppletWithoutChangesPopupVisible?.(true);
+ dispatch(banners.actions.addBanner({ key: 'AppletWithoutChangesBanner' }));
 
  return;
  }

src/modules/Builder/features/SaveAndPublish/SaveAndPublish.tsx

@@ -1,10 +1,8 @@
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
 import { Svg } from 'shared/components/Svg';
 import { SaveAndPublishProcessPopup } from 'modules/Builder/components/Popups/SaveAndPublishProcessPopup';
-import { AppletWithoutChangesPopup } from 'modules/Builder/components/Popups/AppletWithoutChangesPopup';
 import { SaveChangesPopup } from 'modules/Builder/components';
 import { Mixpanel } from 'shared/utils/mixpanel';
 import {
@@ -20,8 +18,6 @@ import { SaveAndPublishProps } from './SaveAndPublish.types';
 export const SaveAndPublish = ({ hasPrompt, setIsFromLibrary }: SaveAndPublishProps) => {
  const { t } = useTranslation('app');
 
- const [appletWithoutChangesPopupVisible, setAppletWithoutChangesPopupVisible] = useState(false);
-
  const {
  isPasswordPopupOpened,
  isPublishProcessPopupOpened,
@@ -36,7 +32,7 @@ export const SaveAndPublish = ({ hasPrompt, setIsFromLibrary }: SaveAndPublishPr
  handleSaveChangesDoNotSaveSubmit,
  handleSaveChangesSaveSubmit,
  cancelNavigation,
- } = useSaveAndPublishSetup(hasPrompt, setIsFromLibrary, setAppletWithoutChangesPopupVisible);
+ } = useSaveAndPublishSetup(hasPrompt, setIsFromLibrary);
  const { appletId } = useParams();
 
  const handlePasswordSubmit = (ref?: AppletPasswordRefType) => {
@@ -56,10 +52,6 @@ export const SaveAndPublish = ({ hasPrompt, setIsFromLibrary }: SaveAndPublishPr
  >
  {t('saveAndPublish')}
  </StyledButton>
- <AppletWithoutChangesPopup
- isPopupVisible={appletWithoutChangesPopupVisible}
- onClose={() => setAppletWithoutChangesPopupVisible(false)}
- />
  <AppletPasswordPopup
  appletId={appletId ?? ''}
  onClose={() => setIsPasswordPopupOpened(false)}

src/redux/store/reducers.ts

@@ -3,6 +3,7 @@ import { combineReducers } from '@reduxjs/toolkit';
 import { alerts } from 'shared/state/Alerts';
 import { applet } from 'shared/state/Applet';
 import { applets } from 'modules/Dashboard/state/Applets';
+import { banners } from 'shared/state/Banners';
 import { calendarEvents } from 'modules/Dashboard/state/CalendarEvents';
 import { popups } from 'modules/Dashboard/state/Popups';
 import { users } from 'modules/Dashboard/state/Users';
@@ -17,6 +18,7 @@ export const rootReducer = combineReducers({
  applet: applet.slice.reducer,
  applets: applets.slice.reducer,
  auth: auth?.slice.reducer,
+ banners: banners.slice.reducer,
  calendarEvents: calendarEvents.slice.reducer,
  library: library.slice.reducer,
  popups: popups.slice.reducer,

src/resources/app-en.json

@@ -1246,7 +1246,7 @@
  "fromToHint": "From {{min}} to {{max}}",
  "selectValidInterval": "Select valid interval",
  "selectValueWithinInterval": "Select a value within an interval",
- "bannerText": "<0>You are using the new version of MindLogger!</0><1>End users must update to the new app.</1><2>Take these steps now to ensure participant response data is not lost.</2>",
+ "versionWarningBanner": "<0>You are using the new version of MindLogger!</0> <1>End users must update to the new app.</1> <2>Take these steps now to ensure participant response data is not lost.</2>",
  "youNeedToAuthorizeHint": "To create a new Applet or merge it with others you have to authorize.",
  "errorFallback": {
  "somethingWentWrong": "Something went wrong.",

src/resources/app-fr.json

@@ -1246,7 +1246,7 @@
  "fromToHint": "De {{min}} à {{max}}",
  "selectValidInterval": "Sélectionnez un intervalle valide",
  "selectValueWithinInterval": "Sélectionnez une valeur dans un intervalle",
- "bannerText": "<0>Vous utilisez la nouvelle version de MindLogger!</0><1>Les utilisateurs finaux doivent mettre à jour vers la nouvelle application.</1><2>Prenez ces mesures dès maintenant pour vous assurer que les données de réponse des participants ne sont pas perdues.</2>",
+ "versionWarningBanner": "<0>Vous utilisez la nouvelle version de MindLogger!</0> <1>Les utilisateurs finaux doivent mettre à jour vers la nouvelle application.</1> <2>Prenez ces mesures dès maintenant pour vous assurer que les données de réponse des participants ne sont pas perdues.</2>",
  "youNeedToAuthorizeHint": "Pour créer une nouvelle applet ou la fusionner avec d'autres, vous devez autoriser.",
  "errorFallback": {
  "somethingWentWrong": "Quelque chose s'est mal passé.",

src/routes/index.tsx

@@ -10,6 +10,7 @@ import { libraryRoutes } from 'modules/Library/routes';
 import { authRoutes } from 'modules/Auth/routes';
 import { auth } from 'redux/modules';
 import { AppletNotFoundPopup } from 'shared/components';
+import { useSessionBanners } from 'shared/hooks/useSessionBanners';
 
 import history from './history';
 
@@ -30,6 +31,8 @@ export const AppRoutes = () => {
  }
  }, [isAuthorized, token, dispatch]);
 
+ useSessionBanners();
+
  return (
  <>
  {/* @ts-expect-error history-router now unstable and it's a known error https://github.com/remix-run/react-router/issues/9630 */}

src/shared/components/Banners/Banner/Banner.const.tsx

@@ -0,0 +1,10 @@
+import { Svg } from 'shared/components/Svg';
+
+const getSvg = (id: string) => <Svg id={id} width={32} height={32} />;
+
+export const BANNER_ICONS = {
+ info: getSvg('more-info-filled'),
+ success: getSvg('check-circle'),
+ warning: getSvg('exclamation-circle'),
+ error: getSvg('exclamation-octagon'),
+};