From ef4fc75f073e6e95b7e80765491a696beb5d200f Mon Sep 17 00:00:00 2001
From: LauraMoraB <l.mora@celonis.com>
Date: Fri, 24 Mar 2023 09:59:27 +0100
Subject: [PATCH] feat: add opt property to use schedule name

---
 src/components/OnCallList/OnCallList.tsx          | 15 ++++++++-------
 .../OpsgeniePage/DefaultOpsgeniePage.tsx          |  4 ++--
 src/components/OpsgeniePage/OpsgeniePage.tsx      |  7 ++++---
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/OnCallList/OnCallList.tsx b/src/components/OnCallList/OnCallList.tsx
index f097d43..5be212a 100644
--- a/src/components/OnCallList/OnCallList.tsx
+++ b/src/components/OnCallList/OnCallList.tsx
@@ -91,13 +91,13 @@ export const OnCallForScheduleList = ({ schedule, responderFormatter }: OnCallFo
   );
 };
 
-export const OnCallForScheduleCard = ({ schedule, responderFormatter }: { schedule: Schedule, responderFormatter?: ResponderTitleFormatter }) => {
+export const OnCallForScheduleCard = ({ schedule, useScheduleName, responderFormatter }: { schedule: Schedule, useScheduleName: boolean, responderFormatter?: ResponderTitleFormatter }) => {
   const title = (
     <div style={{ display: "flex" }}>
       <Tooltip title={schedule.enabled ? 'Enabled' : 'Disabled'}>
         <div>{schedule.enabled ? <StatusOK /> : <StatusAborted />}</div>
       </Tooltip>
-      {schedule.ownerTeam.name}
+      {useScheduleName ? schedule.name : schedule.ownerTeam.name}
     </div>
   );
 
@@ -111,7 +111,7 @@ export const OnCallForScheduleCard = ({ schedule, responderFormatter }: { schedu
   );
 };
 
-const SchedulesGrid = ({ schedules, cardsPerPage, responderFormatter }: { schedules: Schedule[], cardsPerPage: number, responderFormatter?: ResponderTitleFormatter }) => {
+const SchedulesGrid = ({ schedules, cardsPerPage, responderFormatter, useScheduleName }: { schedules: Schedule[], cardsPerPage: number, useScheduleName: boolean, responderFormatter?: ResponderTitleFormatter }) => {
   const classes = useStyles();
   const [results, setResults] = React.useState(schedules);
   const [search, setSearch] = React.useState("");
@@ -157,7 +157,7 @@ const SchedulesGrid = ({ schedules, cardsPerPage, responderFormatter }: { schedu
       />
 
       <ItemCardGrid classes={{ root: classes.onCallItemGrid }}>
-        {results.filter((_, i) => i >= offset && i < offset + cardsPerPage).map(schedule => <OnCallForScheduleCard key={schedule.id} schedule={schedule} responderFormatter={responderFormatter} />)}
+        {results.filter((_, i) => i >= offset && i < offset + cardsPerPage).map(schedule => <OnCallForScheduleCard key={schedule.id} schedule={schedule} responderFormatter={responderFormatter} useScheduleName={useScheduleName} />)}
       </ItemCardGrid>
 
       <Pagination
@@ -175,9 +175,10 @@ const SchedulesGrid = ({ schedules, cardsPerPage, responderFormatter }: { schedu
 export type OnCallListProps = {
   cardsPerPage?: number;
   responderFormatter?: ResponderTitleFormatter;
+  useScheduleName?: boolean;
 };
 
-export const OnCallList = ({ cardsPerPage, responderFormatter }: OnCallListProps) => {
+export const OnCallList = ({ cardsPerPage, responderFormatter, useScheduleName }: OnCallListProps) => {
   const opsgenieApi = useApi(opsgenieApiRef);
   const { value, loading, error } = useAsync(async () => await opsgenieApi.getSchedules());
 
@@ -191,5 +192,5 @@ export const OnCallList = ({ cardsPerPage, responderFormatter }: OnCallListProps
     );
   }
 
-  return <SchedulesGrid schedules={value!.filter(schedule => schedule.enabled)} cardsPerPage={cardsPerPage || 6} responderFormatter={responderFormatter} />;
-};
+  return <SchedulesGrid schedules={value!.filter(schedule => schedule.enabled)} cardsPerPage={cardsPerPage || 6} responderFormatter={responderFormatter} useScheduleName={useScheduleName || false} />;
+};
\ No newline at end of file
diff --git a/src/components/OpsgeniePage/DefaultOpsgeniePage.tsx b/src/components/OpsgeniePage/DefaultOpsgeniePage.tsx
index 3e8d7da..2e46499 100644
--- a/src/components/OpsgeniePage/DefaultOpsgeniePage.tsx
+++ b/src/components/OpsgeniePage/DefaultOpsgeniePage.tsx
@@ -6,11 +6,11 @@ import { Analytics } from '../Analytics';
 import { Layout } from './Layout';
 import { OpsgeniePageProps } from "./OpsgeniePage";
 
-export const DefaultOpsgeniePage = ({ onCallListCardsCount }: OpsgeniePageProps) => {
+export const DefaultOpsgeniePage = ({ onCallListCardsCount, onCallUseScheduleName }: OpsgeniePageProps) => {
   return (
     <Layout>
       <Layout.Route path="who-is-on-call" title="Who is on-call">
-        <OnCallList cardsPerPage={onCallListCardsCount} />
+        <OnCallList cardsPerPage={onCallListCardsCount} useScheduleName={onCallUseScheduleName}/>
       </Layout.Route>
       <Layout.Route path="alerts" title="Alerts">
         <AlertsList />
diff --git a/src/components/OpsgeniePage/OpsgeniePage.tsx b/src/components/OpsgeniePage/OpsgeniePage.tsx
index 6d5835f..112ff4b 100644
--- a/src/components/OpsgeniePage/OpsgeniePage.tsx
+++ b/src/components/OpsgeniePage/OpsgeniePage.tsx
@@ -4,10 +4,11 @@ import { DefaultOpsgeniePage } from './DefaultOpsgeniePage';
 
 export type OpsgeniePageProps = {
   onCallListCardsCount?: number;
+  onCallUseScheduleName?: boolean;
 };
 
-export const OpsgeniePage = ({ onCallListCardsCount }: OpsgeniePageProps) => {
+export const OpsgeniePage = ({ onCallListCardsCount, onCallUseScheduleName }: OpsgeniePageProps) => {
   const outlet = useOutlet();
 
-  return outlet || <DefaultOpsgeniePage onCallListCardsCount={onCallListCardsCount} />;
-};
+  return outlet || <DefaultOpsgeniePage onCallListCardsCount={onCallListCardsCount} onCallUseScheduleName={onCallUseScheduleName} />;
+};
\ No newline at end of file