diff --git a/public/pages/CreateChannel/CreateChannel.tsx b/public/pages/CreateChannel/CreateChannel.tsx index 99a76153..3751f45c 100644 --- a/public/pages/CreateChannel/CreateChannel.tsx +++ b/public/pages/CreateChannel/CreateChannel.tsx @@ -143,15 +143,25 @@ export function CreateChannel(props: CreateChannelsProps) { }); useEffect(() => { - setBreadcrumbs([ BREADCRUMBS.NOTIFICATIONS, + const { edit } = props; + const breadcrumbs = [ + BREADCRUMBS.NOTIFICATIONS, BREADCRUMBS.CHANNELS, - props.edit ? BREADCRUMBS.EDIT_CHANNEL : BREADCRUMBS.CREATE_CHANNEL]); + ]; + if (edit) { + if (getUseUpdatedUx()) { + breadcrumbs.push(BREADCRUMBS.EDIT_CHANNEL_DETAILS(name)) + } + breadcrumbs.push(BREADCRUMBS.EDIT_CHANNEL) + } else { + breadcrumbs.push(BREADCRUMBS.CREATE_CHANNEL) + } window.scrollTo(0, 0); - + setBreadcrumbs(breadcrumbs); if (props.edit) { getChannel(); } - }, []); + }, [name, getUseUpdatedUx()]); const getChannel = async () => { const id = props.match.params.id; @@ -415,7 +425,7 @@ export function CreateChannel(props: CreateChannelsProps) { microsoftTeamsWebhook={microsoftTeamsWebhook} setMicrosoftTeamsWebhook={setMicrosoftTeamsWebhook} /> - ): channelType === BACKEND_CHANNEL_TYPE.EMAIL ? ( + ) : channelType === BACKEND_CHANNEL_TYPE.EMAIL ? ( { coreContext.notifications.toasts.addSuccess( - `Channel ${name} successfully ${ - props.edit ? 'updated' : 'created' + `Channel ${name} successfully ${props.edit ? 'updated' : 'created' }.` ); setTimeout(() => (location.hash = prevURL), SERVER_DELAY); @@ -514,9 +523,8 @@ export function CreateChannel(props: CreateChannelsProps) { coreContext.notifications.toasts.addError( error?.body || error, { - title: `Failed to ${ - props.edit ? 'update' : 'create' - } channel.`, + title: `Failed to ${props.edit ? 'update' : 'create' + } channel.`, } ); }); diff --git a/public/pages/Emails/CreateRecipientGroup.tsx b/public/pages/Emails/CreateRecipientGroup.tsx index 1322c8e8..ee325fc0 100644 --- a/public/pages/Emails/CreateRecipientGroup.tsx +++ b/public/pages/Emails/CreateRecipientGroup.tsx @@ -66,19 +66,25 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) { }; useEffect(() => { - setBreadcrumbs([ + const { edit } = props; + const breadcrumbs = [ BREADCRUMBS.NOTIFICATIONS, BREADCRUMBS.EMAIL_GROUPS, - props.edit - ? BREADCRUMBS.EDIT_RECIPIENT_GROUP - : BREADCRUMBS.CREATE_RECIPIENT_GROUP, - ]); + ]; + if (edit) { + if (getUseUpdatedUx()) { + breadcrumbs.push(BREADCRUMBS.EDIT_RECIPIENT_GROUP_DETAILS(name)) + } + breadcrumbs.push(BREADCRUMBS.EDIT_RECIPIENT_GROUP) + } else { + breadcrumbs.push(BREADCRUMBS.CREATE_RECIPIENT_GROUP) + } window.scrollTo(0, 0); - + setBreadcrumbs(breadcrumbs); if (props.edit) { getRecipientGroup(); } - }, []); + }, [name, getUseUpdatedUx()]); const getRecipientGroup = async () => { const id = props.match.params?.id; diff --git a/public/utils/constants.ts b/public/utils/constants.ts index b640822a..8045e7ca 100644 --- a/public/utils/constants.ts +++ b/public/utils/constants.ts @@ -34,7 +34,11 @@ export const BREADCRUMBS = Object.freeze({ CHANNELS: { text: 'Channels', href: `#${ROUTES.CHANNELS}` }, CHANNEL_DETAILS: { text: 'Channels', href: `#${ROUTES.CHANNEL_DETAILS}` }, CREATE_CHANNEL: { text: 'Create channel', href: `#${ROUTES.CREATE_CHANNEL}` }, - EDIT_CHANNEL: { text: 'Edit channel' }, + EDIT_CHANNEL: { text: 'Edit channel', href: `#${ROUTES.EDIT_CHANNEL}` }, + EDIT_CHANNEL_DETAILS: (name: string) => ({ + text: name, + href: `#${ROUTES.EDIT_CHANNEL}`, + }), EMAIL_SENDERS: { text: 'Email senders', href: `#${ROUTES.EMAIL_SENDERS}` }, EMAIL_GROUPS: { text: 'Email recipient groups', href: `#${ROUTES.EMAIL_GROUPS}` }, CREATE_SENDER: { @@ -51,7 +55,11 @@ export const BREADCRUMBS = Object.freeze({ text: 'Create recipient group', href: `#${ROUTES.CREATE_RECIPIENT_GROUP}`, }, - EDIT_RECIPIENT_GROUP: { text: 'Edit recipient group' }, + EDIT_RECIPIENT_GROUP: { text: 'Edit recipient group', href: `#${ROUTES.EDIT_RECIPIENT_GROUP}`}, + EDIT_RECIPIENT_GROUP_DETAILS: (name: string) => ({ + text: name, + href: `#${ROUTES.EDIT_RECIPIENT_GROUP}`, + }), }); export const ENCRYPTION_TYPE = Object.freeze({