Skip to content
This repository has been archived by the owner on Nov 13, 2024. It is now read-only.

Dex 1435 new notifications to fe #463

Merged
merged 8 commits into from
Oct 5, 2022
Merged

Dex 1435 new notifications to fe #463

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
82f6bb1
DEX-1435 add print statements to compare model choices and uniqAlgori…
Atticus29 Oct 3, 2022
b792610
DEX-1435 create the new notification dialogs and establish the new sc…
Atticus29 Oct 3, 2022
633b655
DEX-1435 continue implementing BE changes, this time from PR 822 on t…
Atticus29 Oct 4, 2022
b4e2c20
DEX-1435 clean up and internationalize
Atticus29 Oct 4, 2022
043edb1
DEX-1435 add last improvements during pre code review
Atticus29 Oct 4, 2022
82cfbd1
DEX-1435 fix i8n issue
Atticus29 Oct 4, 2022
d66d30e
DEX-1435 change your to a
Atticus29 Oct 4, 2022
d0f5ef0
DEX-1435 respond to code review feedback
Atticus29 Oct 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion locale/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1196,5 +1196,16 @@
"EDIT_COLLABORATION_CURRENT_STATE_LABEL": "Current state",
"EDIT_COLLABORATION_CURRENT_STATE_DESCRIPTION": "Changing the state will cancel any pending requests.",
"COLLABORATIONS": "Collaborations",
"URLS_MUST_INCLUDE_HTTPS": "All URLs must include https:// to be valid"
"URLS_MUST_INCLUDE_HTTPS": "All URLs must include https:// to be valid",
"EDIT_COLLABORATION_REVOKED_BY_USER_MANAGER": "Edit collaboration revoked by your user manager",
"EDIT_COLLABORATION_WAS_REVOKED_BY_YOUR_USER_MANAGER": "An edit-level collaboration with {otherUserNameForManagerNotifications} was revoked by your user manager.",
"COLLABORATION_EDIT_DENIED": "Collaboration edit denied",
"EDIT_COLLABORATION_DENIED_MESSAGE": "{userName} denied your collaboration edit request",
"COLLABORATION_DENIED_BY_USER_MANAGER": "Collaboration denied by your user manager",
"COLLABORATION_DENIED_BY_USER_MANAGER_MESSAGE": "Your collaboration with {otherUserNameForManagerNotifications} was denied by your user manager {managerName}.",
"EDIT_COLLABORATION_DENIED_BY_USER_MANAGER": "Edit-level collaboration denied by your user manager",
"EDIT_COLLABORATION_DENIED_BY_USER_MANAGER_MESSAGE": "An edit-level collaboration with {otherUserNameForManagerNotifications} was denied by your user manager {managerName}.",
"EDIT_COLLABORATION_APPROVED_BY_USER_MANAGER": "Edit collaboration approved by your user manager",
"EDIT_COLLABORATION_WAS_APPROVED_BY_YOUR_USER_MANAGER": "An edit-level collaboration with {otherUserNameForManagerNotifications} was approved by your user manager {managerName}.",
"UNNAMED_MANAGER": "Unnamed manager"
}
14 changes: 14 additions & 0 deletions src/components/AuthenticatedAppHeader/NotificationPaneDisplayText.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ export default function NotificationPaneDisplayText({
theirIndividualName,
theirIndividualGuid,
formattedDeadline,
otherUserGuidForManagerNotifications,
otherUserNameForManagerNotifications,
managerName,
timeSince,
}) {
const theme = useTheme();
Expand Down Expand Up @@ -54,6 +57,17 @@ export default function NotificationPaneDisplayText({
</span>
),
formattedDeadline,
otherUserNameForManagerNotifications: (
<span>
<Link
newTab
href={`/users/${otherUserGuidForManagerNotifications}`}
>
{otherUserNameForManagerNotifications}
</Link>
</span>
),
managerName,
}}
/>
<Text
Expand Down
17 changes: 16 additions & 1 deletion src/components/AuthenticatedAppHeader/NotificationsPane.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default function NotificationsPane({
refreshNotifications,
shouldOpen,
setShouldOpen,
currentUserGuid,
}) {
const intl = useIntl();
const queryClient = useQueryClient();
Expand Down Expand Up @@ -85,7 +86,14 @@ export default function NotificationsPane({
theirIndividualName,
theirIndividualGuid,
formattedDeadline,
} = getNotificationProps(intl, notification);
otherUserGuidForManagerNotifications,
otherUserNameForManagerNotifications,
managerName,
} = getNotificationProps(
intl,
notification,
currentUserGuid,
);
const deriveButtonPath = get(
currentNotificationSchema,
'deriveButtonPath',
Expand Down Expand Up @@ -130,6 +138,13 @@ export default function NotificationsPane({
theirIndividualName={theirIndividualName}
theirIndividualGuid={theirIndividualGuid}
formattedDeadline={formattedDeadline}
otherUserGuidForManagerNotifications={
otherUserGuidForManagerNotifications
}
otherUserNameForManagerNotifications={
otherUserNameForManagerNotifications
}
managerName={managerName}
timeSince={timeSince}
/>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/components/AuthenticatedAppHeader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ export default function AppHeader() {
refreshNotifications={refreshNotifications}
shouldOpen={shouldOpenNotificationPane}
setShouldOpen={setShouldOpenNotificationPane}
currentUserGuid={meData?.guid}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I fluctuated a little bit about whether I wanted this to be a prop here or just derive it with an api call in the child component.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ran into the same question on #464. I passed it as a prop too. It looks like React Query recommends just deriving it though.
TanStack/query#463

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I kept it as a prop for this ticket...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That seems like a good idea to me. It is something we can look into and try to implement going forward.

/>
<HeaderButton
onClick={e => setUserMenuAnchorEl(e.currentTarget)}
Expand Down
18 changes: 17 additions & 1 deletion src/components/dialogs/NotificationDetailsDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import ButtonLink from '../ButtonLink';
import Button from '../Button';
import CustomAlert from '../Alert';
import { getNotificationProps } from '../../utils/notificationUtils';
import useGetMe from '../../models/users/useGetMe';

export default function NotificationDetailsDialog({
open,
Expand All @@ -27,6 +28,7 @@ export default function NotificationDetailsDialog({
const onCloseDialog = () => {
onClose();
};
const { data: currentUserData } = useGetMe();

const {
userName,
Expand All @@ -38,7 +40,10 @@ export default function NotificationDetailsDialog({
theirIndividualName,
theirIndividualGuid,
formattedDeadline,
} = getNotificationProps(intl, notification);
otherUserGuidForManagerNotifications,
otherUserNameForManagerNotifications,
managerName,
} = getNotificationProps(intl, notification, currentUserData?.guid);
Emily-Ke marked this conversation as resolved.
Show resolved Hide resolved

return (
<StandardDialog
Expand Down Expand Up @@ -81,6 +86,17 @@ export default function NotificationDetailsDialog({
</span>
),
formattedDeadline,
otherUserNameForManagerNotifications: (
<span>
<Link
newTab
href={`/users/${otherUserGuidForManagerNotifications}`}
>
{otherUserNameForManagerNotifications}
</Link>
</span>
),
managerName,
}}
/>
</DialogContent>
Expand Down
30 changes: 30 additions & 0 deletions src/components/dialogs/notificationDialogUtils/NotificationCollaborationEditDeniedDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of these new dialogs are essentially duplicates with different names. I still don't love this pattern, because it's much DRYer to just have a baseNotificationDialog component do this job, but Ben long ago recommended to do it this way in case the notifications needed to diverge farther from one another in the future.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks to me like notifications have already diverged pretty far from each other, but instead of putting those differences in these files, we put them in the NotificationDetailsDialog.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah... NotificationDetailsDialog might be a great example of the abstraction monster situation described in https://www.deconstructconf.com/2019/dan-abramov-the-wet-codebase. Hoping to get the chance to make this better/more human-friendly in the future (but not for current ticket).

import { get } from 'lodash-es';
import { notificationSchema } from '../../../constants/notificationSchema';
import NotificationDetailsDialog from '../NotificationDetailsDialog';

export default function NotificationCollaborationEditDeniedDialog({
notification,
onClose,
open,
}) {
const notificationType = notification?.message_type;
const currentNotificationSchema = get(
notificationSchema,
notificationType,
);
const availableButtons = [];
return (
<NotificationDetailsDialog
open={open}
onClose={onClose}
notification={notification}
titleId={get(currentNotificationSchema, 'titleId')}
moreDetailedDescription={get(
currentNotificationSchema,
'moreDetailedDescription',
)}
buttons={availableButtons}
/>
);
}
30 changes: 30 additions & 0 deletions ...mponents/dialogs/notificationDialogUtils/NotificationCollaborationManagerDeniedDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { get } from 'lodash-es';
import { notificationSchema } from '../../../constants/notificationSchema';
import NotificationDetailsDialog from '../NotificationDetailsDialog';

export default function NotificationCollaborationManagerDeniedDialog({
notification,
onClose,
open,
}) {
const notificationType = notification?.message_type;
const currentNotificationSchema = get(
notificationSchema,
notificationType,
);
const availableButtons = [];
return (
<NotificationDetailsDialog
open={open}
onClose={onClose}
notification={notification}
titleId={get(currentNotificationSchema, 'titleId')}
moreDetailedDescription={get(
currentNotificationSchema,
'moreDetailedDescription',
)}
buttons={availableButtons}
/>
);
}
30 changes: 30 additions & 0 deletions ...ts/dialogs/notificationDialogUtils/NotificationCollaborationManagerEditApprovedDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { get } from 'lodash-es';
import { notificationSchema } from '../../../constants/notificationSchema';
import NotificationDetailsDialog from '../NotificationDetailsDialog';

export default function NotificationCollaborationManagerEditApprovedDialog({
notification,
onClose,
open,
}) {
const notificationType = notification?.message_type;
const currentNotificationSchema = get(
notificationSchema,
notificationType,
);
const availableButtons = [];
return (
<NotificationDetailsDialog
open={open}
onClose={onClose}
notification={notification}
titleId={get(currentNotificationSchema, 'titleId')}
moreDetailedDescription={get(
currentNotificationSchema,
'moreDetailedDescription',
)}
buttons={availableButtons}
/>
);
}
30 changes: 30 additions & 0 deletions ...ents/dialogs/notificationDialogUtils/NotificationCollaborationManagerEditDeniedDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { get } from 'lodash-es';
import { notificationSchema } from '../../../constants/notificationSchema';
import NotificationDetailsDialog from '../NotificationDetailsDialog';

export default function NotificationCollaborationManagerEditDeniedDialog({
notification,
onClose,
open,
}) {
const notificationType = notification?.message_type;
const currentNotificationSchema = get(
notificationSchema,
notificationType,
);
const availableButtons = [];
return (
<NotificationDetailsDialog
open={open}
onClose={onClose}
notification={notification}
titleId={get(currentNotificationSchema, 'titleId')}
moreDetailedDescription={get(
currentNotificationSchema,
'moreDetailedDescription',
)}
buttons={availableButtons}
/>
);
}
30 changes: 30 additions & 0 deletions ...ents/dialogs/notificationDialogUtils/NotificationCollaborationManagerEditRevokeDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { get } from 'lodash-es';
import { notificationSchema } from '../../../constants/notificationSchema';
import NotificationDetailsDialog from '../NotificationDetailsDialog';

export default function NotificationCollaborationManagerEditRevokeDialog({
notification,
onClose,
open,
}) {
const notificationType = notification?.message_type;
const currentNotificationSchema = get(
notificationSchema,
notificationType,
);
const availableButtons = [];
return (
<NotificationDetailsDialog
open={open}
onClose={onClose}
notification={notification}
titleId={get(currentNotificationSchema, 'titleId')}
moreDetailedDescription={get(
currentNotificationSchema,
'moreDetailedDescription',
)}
buttons={availableButtons}
/>
);
}
16 changes: 16 additions & 0 deletions src/components/dialogs/notificationDialogUtils/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@ import NotificationCollaborationManagerRevokeDialog from './NotificationCollabor
import NotificationIndividualMergeRequestDialog from './NotificationIndividualMergeRequestDialog';
import NotificationIndividualMergeCompleteDialog from './NotificationIndividualMergeCompleteDialog';
import NotificationIndividualMergeBlockDialog from './NotificationIndividualMergeBlockDialog';
import NotificationCollaborationManagerEditApprovedDialog from './NotificationCollaborationManagerEditApprovedDialog';
import NotificationCollaborationManagerEditRevokeDialog from './NotificationCollaborationManagerEditRevokeDialog';
import NotificationCollaborationEditDeniedDialog from './NotificationCollaborationEditDeniedDialog';
import NotificationCollaborationManagerDeniedDialog from './NotificationCollaborationManagerDeniedDialog';
import NotificationCollaborationManagerEditDeniedDialog from './NotificationCollaborationManagerEditDeniedDialog';

import { notificationTypeNames } from '../../../constants/notificationSchema';

export const notificationTypes = {
Expand Down Expand Up @@ -37,4 +43,14 @@ export const notificationTypes = {
NotificationIndividualMergeCompleteDialog,
[notificationTypeNames.individual_merge_blocked]:
NotificationIndividualMergeBlockDialog,
[notificationTypeNames.collaboration_manager_edit_approved]:
NotificationCollaborationManagerEditApprovedDialog,
[notificationTypeNames.collaboration_manager_edit_revoke]:
NotificationCollaborationManagerEditRevokeDialog,
[notificationTypeNames.collaboration_edit_denied]:
NotificationCollaborationEditDeniedDialog,
[notificationTypeNames.collaboration_manager_denied]:
NotificationCollaborationManagerDeniedDialog,
[notificationTypeNames.collaboration_manager_edit_denied]:
NotificationCollaborationManagerEditDeniedDialog,
};
63 changes: 63 additions & 0 deletions src/constants/notificationSchema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,72 @@ export const notificationTypeNames = {
individual_merge_request: 'individual_merge_request',
individual_merge_complete: 'individual_merge_complete',
individual_merge_blocked: 'individual_merge_blocked',

collaboration_manager_edit_approved:
'collaboration_manager_edit_approved',
collaboration_manager_edit_revoke:
'collaboration_manager_edit_revoke',
collaboration_edit_denied: 'collaboration_edit_denied',
collaboration_manager_denied: 'collaboration_manager_denied',
collaboration_manager_edit_denied:
'collaboration_manager_edit_denied',
};

const notificationSchemaPlaceholder = {};

notificationSchemaPlaceholder[
notificationTypeNames.collaboration_manager_edit_approved
Emily-Ke marked this conversation as resolved.
Show resolved Hide resolved
] = {
titleId: 'EDIT_COLLABORATION_DENIED_BY_USER_MANAGER',
notificationMessage:
'EDIT_COLLABORATION_DENIED_BY_USER_MANAGER_MESSAGE',
moreDetailedDescription:
'EDIT_COLLABORATION_DENIED_BY_USER_MANAGER_MESSAGE',
showNotificationDialog: false,
buttonPath: '/#collab-card',
};

notificationSchemaPlaceholder[
notificationTypeNames.collaboration_manager_edit_approved
] = {
titleId: 'EDIT_COLLABORATION_APPROVED_BY_USER_MANAGER',
notificationMessage:
'EDIT_COLLABORATION_WAS_APPROVED_BY_YOUR_USER_MANAGER',
moreDetailedDescription:
'EDIT_COLLABORATION_WAS_APPROVED_BY_YOUR_USER_MANAGER',
showNotificationDialog: false,
buttonPath: '/#collab-card',
};
notificationSchemaPlaceholder[
notificationTypeNames.collaboration_manager_denied
] = {
titleId: 'COLLABORATION_DENIED_BY_USER_MANAGER',
notificationMessage: 'COLLABORATION_DENIED_BY_USER_MANAGER_MESSAGE',
moreDetailedDescription:
'COLLABORATION_DENIED_BY_USER_MANAGER_MESSAGE',
showNotificationDialog: false,
buttonPath: '/#collab-card',
};
notificationSchemaPlaceholder[
notificationTypeNames.collaboration_edit_denied
] = {
titleId: 'COLLABORATION_EDIT_DENIED',
notificationMessage: 'EDIT_COLLABORATION_DENIED_MESSAGE',
moreDetailedDescription: 'EDIT_COLLABORATION_DENIED_MESSAGE',
showNotificationDialog: false,
buttonPath: '/#collab-card',
};
notificationSchemaPlaceholder[
notificationTypeNames.collaboration_manager_edit_revoke
] = {
titleId: 'EDIT_COLLABORATION_REVOKED_BY_USER_MANAGER',
notificationMessage:
'EDIT_COLLABORATION_WAS_REVOKED_BY_YOUR_USER_MANAGER',
moreDetailedDescription:
'EDIT_COLLABORATION_WAS_REVOKED_BY_YOUR_USER_MANAGER',
showNotificationDialog: false,
buttonPath: '/#collab-card',
};
notificationSchemaPlaceholder[
notificationTypeNames.collaboration_manager_create
] = {
Expand Down
Loading