Task/FP-1375: Admin controlled messages

client/src/components/ManageAccount/tests/ManageAccount.test.js

@@ -8,7 +8,7 @@ import { initialState as profile } from '../../../redux/reducers/profile.reducer
 import { initialState as workbench } from '../../../redux/reducers/workbench.reducers';
 import { initialState as notifications } from '../../../redux/reducers/notifications.reducers';
 import { initialTicketCreateState as ticketCreate } from '../../../redux/reducers/tickets.reducers';
-import introMessages from '../../../redux/reducers/intro.reducers';
+import introMessages from '../../../redux/reducers/message.reducers';
 import ManageAccountPage from '../index';
 
 const mockStore = configureStore();

client/src/components/Tickets/TicketStandaloneCreate.test.js

@@ -5,7 +5,7 @@ import renderComponent from 'utils/testing';
 import TicketStandaloneCreate from './TicketStandaloneCreate';
 import { initialTicketCreateState as ticketCreate } from '../../redux/reducers/tickets.reducers';
 import { initialState as workbench } from '../../redux/reducers/workbench.reducers';
-import initialIntroMessages from '../../redux/reducers/intro.reducers';
+import initialIntroMessages from '../../redux/reducers/message.reducers';
 import { initialState as user } from '../../redux/reducers/authenticated_user.reducer';
 
 const mockStore = configureStore();
@@ -15,7 +15,7 @@ describe('TicketStandaloneCreate', () => {
  const store = mockStore({
  ticketCreate,
  authenticatedUser: user,
- introMessages: initialIntroMessages,
+ introMessages: { ...initialIntroMessages, TICKETS: true },
  workbench,
  });
 

client/src/components/Workbench/AppRouter.jsx

@@ -26,6 +26,7 @@ function AppRouter() {
  useEffect(() => {
  if (authenticatedUser) {
  dispatch({ type: 'FETCH_INTRO' });
+ dispatch({ type: 'FETCH_CUSTOM_MESSAGES' });
  }
  }, [authenticatedUser]);
  return (

client/src/components/Workbench/Workbench.test.js

@@ -14,7 +14,7 @@ import {
 } from '../../redux/reducers/tickets.reducers';
 import { initialState as authenticatedUser } from '../../redux/reducers/authenticated_user.reducer';
 import { initialState as systemMonitor } from '../../redux/reducers/systemMonitor.reducers';
-import { initialIntroMessages as introMessages } from '../../redux/reducers/intro.reducers';
+import { initialIntroMessages as introMessages } from '../../redux/reducers/message.reducers';
 import { initialSystemState as systems } from '../../redux/reducers/datafiles.reducers';
 
 import * as introMessageText from '../../constants/messages';

client/src/components/Workbench/index.test.js

@@ -25,6 +25,7 @@ describe('AppRouter', () => {
  { type: 'FETCH_WORKBENCH' },
  { type: 'FETCH_SYSTEMS' },
  { type: 'FETCH_INTRO' },
+ { type: 'FETCH_CUSTOM_MESSAGES' },
  ]);
  });
 });

client/src/components/_common/CustomMessage/CustomMessage.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SectionMessage } from '_common';
+import { useDispatch, useSelector } from 'react-redux';
+import styles from './CustomMessage.module.scss';
+
+/**
+ * A message which, is created by the admin. Like IntroMessage, when dismissed, will not appear again.
+ *
+ * _This message is designed for custom messages from the admin.
+ *
+ * @example
+ * // message with identifier
+ * <CustomMessage
+ * componentName={identifierForMessageLikeRouteName}
+ * >
+ * </CustomMessage>
+ */
+function CustomMessage({ componentName }) {
+ const dispatch = useDispatch();
+ const messages = useSelector((state) => {
+ return state.customMessages
+ ? state.customMessages.messages.filter((message) => {
+ return message.unread && message.template.component === componentName;
+ })
+ : [];
+ });
+
+ function onDismiss(dismissMessage) {
+ const newCustomMessages = {
+ messages: messages.map((message) => {
+ message.unread =
+ message.template.id === dismissMessage.template.id
+ ? false
+ : message.unread;
+ return message;
+ }),
+ };
+ dispatch({
+ type: 'SAVE_CUSTOM_MESSAGES',
+ payload: newCustomMessages,
+ });
+ }
+
+ return messages.map((message) => {
+ const template = message.template;
+ return (
+ <div key={template.id} className={styles.message}>
+ <SectionMessage
+ type={template.message_type}
+ canDismiss={template.dismissible}
+ onDismiss={() => onDismiss(message)}
+ >
+ {template.message}
+ </SectionMessage>
+ </div>
+ );
+ });
+}
+
+CustomMessage.propTypes = {
+ /** A unique identifier for the message */
+ componentName: PropTypes.string.isRequired,
+};
+
+export default CustomMessage;

client/src/components/_common/CustomMessage/CustomMessage.module.scss

@@ -0,0 +1,4 @@
+.message {
+ margin-top: 12px;
+ margin-bottom: 12px;
+}

client/src/components/_common/CustomMessage/CustomMessage.test.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+
+import CustomMessage from './CustomMessage';
+
+const mockStore = configureStore();
+const store = mockStore({
+ customMessages: {
+ messages: [
+ {
+ template: {
+ id: 1,
+ component: 'TEST',
+ message_type: 'warning',
+ dismissible: true,
+ message: 'Test Message',
+ },
+ unread: true,
+ },
+ ],
+ },
+});
+
+describe('CustomMessage', () => {
+ describe('elements', () => {
+ it('renders message text, message type, and dismissability correctly', () => {
+ const { container, getByText } = render(
+ <Provider store={store}>
+ <CustomMessage componentName="TEST"></CustomMessage>
+ </Provider>
+ );
+ expect(container.getElementsByClassName('is-warn').length).toEqual(1);
+ expect(container.getElementsByClassName('close-button').length).toEqual(
+ 1
+ );
+ expect(getByText('Test Message')).not.toEqual(null);
+ });
+ });
+});

client/src/components/_common/CustomMessage/index.js

@@ -0,0 +1 @@
+export { default } from './CustomMessage';

client/src/components/_common/IntroMessage/IntroMessage.jsx

@@ -19,7 +19,7 @@ export function isKnownMessage(messageName) {
 /**
  * A message which, when dismissed, will not appear again unless browser storage is cleared
  *
- * _This message is designed for user introduction to sections, but can be abstracted further into a `<DismissableMessage>` or abstracted less such that a message need not be passed in._
+ * _This message is designed for user introduction to sections, but can be abstracted further into a `<DismissibleMessage>` or abstracted less such that a message need not be passed in._
  *
  * @example
  * // message with custom text, class, and identifier

client/src/components/_common/Section/SectionMessages.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { IntroMessage, isKnownIntroMessage } from '_common';
+import { CustomMessage, IntroMessage, isKnownIntroMessage } from '_common';
 import * as MESSAGES from '../../../constants/messages';
 
 import styles from './SectionMessages.module.css';
@@ -62,6 +62,10 @@ function SectionMessages({
  isKnownIntroMessage(introMessageName) || children.length > 0;
  const hasMessageClass = 'has-message';
 
+ const customMessage = (
+ <CustomMessage componentName={introMessageName}></CustomMessage>
+ );
+
  useEffect(() => {
  if (hasMessage) {
  document.body.classList.add(hasMessageClass);
@@ -73,6 +77,7 @@ function SectionMessages({
  return (
  <aside className={`${styles['root']} ${className}`}>
  {introMessage}
+ {customMessage}
  {children}
  </aside>
  );

client/src/components/_common/index.js

@@ -24,6 +24,7 @@ export {
  default as IntroMessage,
  isKnownMessage as isKnownIntroMessage,
 } from './IntroMessage';
+export { default as CustomMessage } from './CustomMessage';
 export { default as Pill } from './Pill';
 export { default as TextCopyField } from './TextCopyField';
 export { default as ShowMore } from './ShowMore';

client/src/redux/reducers/index.js

@@ -16,7 +16,7 @@ import authenticatedUser from './authenticated_user.reducer';
 import { pushKeys } from './systems.reducers';
 import notifications from './notifications.reducers';
 import workbench from './workbench.reducers';
-import introMessages from './intro.reducers';
+import { introMessages, customMessages } from './message.reducers';
 import { onboarding } from './onboarding.reducers';
 import projects from './projects.reducers';
 import { users } from './users.reducers';
@@ -42,6 +42,7 @@ export default combineReducers({
  notifications,
  workbench,
  introMessages,
+ customMessages,
  onboarding,
  projects,
  users,

client/src/redux/reducers/message.reducers.js

@@ -0,0 +1,79 @@
+export const initialIntroMessages = {
+ DASHBOARD: true,
+ APPLICATIONS: true,
+ DATA: true,
+ ALLOCATIONS: true,
+ HISTORY: true,
+ ACCOUNT: true,
+ TICKETS: true,
+};
+
+export const initialCustomMessages = {
+ messages: [],
+};
+
+export function introMessages(state = initialIntroMessages, action) {
+ switch (action.type) {
+ case 'INTRO_FETCH_STARTED':
+ return {
+ ...state,
+ };
+ case 'INTRO_FETCH_SUCCESS':
+ return {
+ ...state,
+ ...action.payload,
+ };
+ case 'INTRO_FETCH_ERROR':
+ return {
+ ...state,
+ };
+ case 'INTRO_SAVE_STARTED':
+ return {
+ ...state,
+ };
+ case 'INTRO_SAVE_SUCCESS':
+ return {
+ ...state,
+ ...action.payload,
+ };
+ case 'INTRO_SAVE_ERROR':
+ return {
+ ...action.payload,
+ };
+ default:
+ return state;
+ }
+}
+
+export function customMessages(state = initialCustomMessages, action) {
+ switch (action.type) {
+ case 'CUSTOM_MESSAGES_FETCH_STARTED':
+ return {
+ ...state,
+ };
+ case 'CUSTOM_MESSAGES_FETCH_SUCCESS':
+ return {
+ ...state,
+ ...action.payload,
+ };
+ case 'CUSTOM_MESSAGES_FETCH_ERROR':
+ return {
+ ...state,
+ };
+ case 'CUSTOM_MESSAGES_SAVE_STARTED':
+ return {
+ ...state,
+ };
+ case 'CUSTOM_MESSAGES_SAVE_SUCCESS':
+ return {
+ ...state,
+ ...action.payload,
+ };
+ case 'CUSTOM_MESSAGES_SAVE_ERROR':
+ return {
+ ...action.payload,
+ };
+ default:
+ return state;
+ }
+}

client/src/redux/sagas/index.js

@@ -39,7 +39,12 @@ import {
 import { watchPostRequestAccess } from './requestAccess.sagas';
 import { watchAuthenticatedUser } from './authenticated_user.sagas';
 import { watchWorkbench } from './workbench.sagas';
-import { watchFetchIntroMessages, watchSaveIntroMessages } from './intro.sagas';
+import {
+ watchFetchIntroMessages,
+ watchSaveIntroMessages,
+ watchFetchCustomMessages,
+ watchSaveCustomMessages,
+} from './message.sagas';
 import {
  watchOnboardingAdminList,
  watchOnboardingAdminIndividualUser,
@@ -90,7 +95,9 @@ export default function* rootSaga() {
  watchFetchNotifications(),
  watchWorkbench(),
  watchFetchIntroMessages(),
+ watchFetchCustomMessages(),
  watchSaveIntroMessages(),
+ watchSaveCustomMessages(),
  watchOnboardingAdminList(),
  watchOnboardingAdminIndividualUser(),
  watchOnboardingAction(),