From 3598136ac7dc17dd2a6812224d75ddc99373fad3 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@hallila.com>
Date: Fri, 20 Jan 2023 11:32:01 +0100
Subject: [PATCH] Refactor plugin Card component to not rerender contents
 unnecessarily.

Signed-off-by: Jussi Hallila <jussi@hallila.com>
---
 .changeset/young-singers-learn.md             |  5 ++
 .../src/components/EntitySplunkOnCallCard.tsx | 80 ++++++++++++-------
 2 files changed, 54 insertions(+), 31 deletions(-)
 create mode 100644 .changeset/young-singers-learn.md

diff --git a/.changeset/young-singers-learn.md b/.changeset/young-singers-learn.md
new file mode 100644
index 0000000000..9df5d91fe3
--- /dev/null
+++ b/.changeset/young-singers-learn.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-splunk-on-call': patch
+---
+
+Refactor plugin Card component to not rerender contents unnecessarily.
diff --git a/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx b/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx
index 26521ea9ee..0f32c925f0 100644
--- a/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx
+++ b/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx
@@ -99,6 +99,48 @@ export const MissingEventsRestEndpoint = () => (
   </CardContent>
 );
 
+const Content = ({
+  team,
+  routingKey,
+  usersHashMap,
+  readOnly,
+  showDialog,
+  refreshIncidents,
+  actions,
+}: {
+  team: Team | undefined;
+  routingKey: RoutingKey | undefined;
+  usersHashMap: any;
+  readOnly: boolean;
+  showDialog: boolean;
+  refreshIncidents: boolean;
+  actions: {
+    handleDialog: () => void;
+    handleRefresh: () => void;
+  };
+}) => {
+  const teamName = team?.name ?? '';
+
+  return (
+    <>
+      <Incidents
+        readOnly={readOnly || false}
+        team={teamName}
+        refreshIncidents={refreshIncidents}
+      />
+      {usersHashMap && team && (
+        <EscalationPolicy team={teamName} users={usersHashMap} />
+      )}
+      <TriggerDialog
+        routingKey={routingKey?.routingKey ?? teamName}
+        showDialog={showDialog}
+        handleDialog={actions.handleDialog}
+        onIncidentCreated={actions.handleRefresh}
+      />
+    </>
+  );
+};
+
 /** @public */
 export const isSplunkOnCallAvailable = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[SPLUNK_ON_CALL_TEAM]) ||
@@ -219,37 +261,6 @@ export const EntitySplunkOnCallCard = (props: EntitySplunkOnCallCardProps) => {
     );
   }
 
-  const Content = ({
-    team,
-    routingKey,
-    usersHashMap,
-  }: {
-    team: Team | undefined;
-    routingKey: RoutingKey | undefined;
-    usersHashMap: any;
-  }) => {
-    const teamName = team?.name ?? '';
-
-    return (
-      <>
-        <Incidents
-          readOnly={readOnly || false}
-          team={teamName}
-          refreshIncidents={refreshIncidents}
-        />
-        {usersHashMap && team && (
-          <EscalationPolicy team={teamName} users={usersHashMap} />
-        )}
-        <TriggerDialog
-          routingKey={routingKey?.routingKey ?? teamName}
-          showDialog={showDialog}
-          handleDialog={handleDialog}
-          onIncidentCreated={handleRefresh}
-        />
-      </>
-    );
-  };
-
   const triggerLink: IconLinkVerticalProps = {
     label: 'Create Incident',
     onClick: handleDialog,
@@ -287,6 +298,13 @@ export const EntitySplunkOnCallCard = (props: EntitySplunkOnCallCardProps) => {
               team={team}
               routingKey={entityData?.foundRoutingKey}
               usersHashMap={entityData?.usersHashMap}
+              readOnly={readOnly ?? false}
+              refreshIncidents={refreshIncidents}
+              showDialog={showDialog}
+              actions={{
+                handleRefresh,
+                handleDialog,
+              }}
             />
           </CardContent>
         </Card>