From dd955cf0a23522292762c780e2c3766f0da16eef Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 6 Sep 2024 20:04:45 +0000
Subject: [PATCH] edit page changes as per new page header (#257)

* edit as per new page header fixed

Signed-off-by: Riya Saxena <riysaxen@amazon.com>

* bug fix

Signed-off-by: Riya Saxena <riysaxen@amazon.com>

* bug fix

Signed-off-by: Riya Saxena <riysaxen@amazon.com>

---------

Signed-off-by: Riya Saxena <riysaxen@amazon.com>
Signed-off-by: Riya <69919272+riysaxen-amzn@users.noreply.github.com>
(cherry picked from commit 0ec08ca1483cb27bb9786bc715dff403fb862aee)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 public/pages/CreateChannel/CreateChannel.tsx | 34 ++++++++++++--------
 public/pages/Emails/CreateRecipientGroup.tsx | 20 ++++++++----
 public/utils/constants.ts                    | 12 +++++--
 3 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/public/pages/CreateChannel/CreateChannel.tsx b/public/pages/CreateChannel/CreateChannel.tsx
index 2256cb59..d82d91a8 100644
--- a/public/pages/CreateChannel/CreateChannel.tsx
+++ b/public/pages/CreateChannel/CreateChannel.tsx
@@ -144,15 +144,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;
@@ -416,7 +426,7 @@ export function CreateChannel(props: CreateChannelsProps) {
               microsoftTeamsWebhook={microsoftTeamsWebhook}
               setMicrosoftTeamsWebhook={setMicrosoftTeamsWebhook}
             />
-          ): channelType === BACKEND_CHANNEL_TYPE.EMAIL ? (
+          ) : channelType === BACKEND_CHANNEL_TYPE.EMAIL ? (
             <EmailSettings
               senderType={senderType}
               setSenderType={setSenderType}
@@ -497,15 +507,14 @@ export function CreateChannel(props: CreateChannelsProps) {
                 const config = createConfigObject();
                 const request = props.edit
                   ? servicesContext.notificationService.updateConfig(
-                      id!,
-                      config
-                    )
+                    id!,
+                    config
+                  )
                   : servicesContext.notificationService.createConfig(config);
                 await request
                   .then((response) => {
                     coreContext.notifications.toasts.addSuccess(
-                      `Channel ${name} successfully ${
-                        props.edit ? 'updated' : 'created'
+                      `Channel ${name} successfully ${props.edit ? 'updated' : 'created'
                       }.`
                     );
                     setTimeout(() => (location.hash = prevURL), SERVER_DELAY);
@@ -515,9 +524,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 9ac9c534..f492f389 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({