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 1/2] 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>

From effd71ead2453ece89fb645d93bc960693e99ac3 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@hallila.com>
Date: Fri, 20 Jan 2023 11:36:09 +0100
Subject: [PATCH 2/2] Inline the content, no need for a separate component.

Signed-off-by: Jussi Hallila <jussi@hallila.com>
---
 .../src/components/EntitySplunkOnCallCard.tsx | 112 ++++++------------
 1 file changed, 39 insertions(+), 73 deletions(-)

diff --git a/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx b/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx
index 0f32c925f0..54784b1f4e 100644
--- a/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx
+++ b/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx
@@ -33,7 +33,7 @@ import { MissingApiKeyOrApiIdError } from './Errors';
 import { EscalationPolicy } from './Escalation';
 import { Incidents } from './Incident';
 import { TriggerDialog } from './TriggerDialog';
-import { RoutingKey, Team, User } from './types';
+import { RoutingKey, User } from './types';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
 import {
@@ -99,48 +99,6 @@ 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]) ||
@@ -278,37 +236,45 @@ export const EntitySplunkOnCallCard = (props: EntitySplunkOnCallCardProps) => {
 
   return (
     <>
-      {teams.map((team, i) => (
-        <Card key={i} className={classes.onCallCard}>
-          <CardHeader
-            title="Splunk On-Call"
-            subheader={[
-              <Typography key="team_name">
-                Team: {team && team.name ? team.name : ''}
-              </Typography>,
-              <HeaderIconLinkRow
-                key="incident_trigger"
-                links={!readOnly ? [serviceLink, triggerLink] : [serviceLink]}
-              />,
-            ]}
-          />
-          <Divider />
-          <CardContent>
-            <Content
-              team={team}
-              routingKey={entityData?.foundRoutingKey}
-              usersHashMap={entityData?.usersHashMap}
-              readOnly={readOnly ?? false}
-              refreshIncidents={refreshIncidents}
-              showDialog={showDialog}
-              actions={{
-                handleRefresh,
-                handleDialog,
-              }}
+      {teams.map((team, i) => {
+        const teamName = team?.name ?? '';
+        return (
+          <Card key={i} className={classes.onCallCard}>
+            <CardHeader
+              title="Splunk On-Call"
+              subheader={[
+                <Typography key="team_name">
+                  Team: {team && team.name ? team.name : ''}
+                </Typography>,
+                <HeaderIconLinkRow
+                  key="incident_trigger"
+                  links={!readOnly ? [serviceLink, triggerLink] : [serviceLink]}
+                />,
+              ]}
             />
-          </CardContent>
-        </Card>
-      ))}
+            <Divider />
+            <CardContent>
+              <Incidents
+                readOnly={readOnly || false}
+                team={teamName}
+                refreshIncidents={refreshIncidents}
+              />
+              {entityData?.usersHashMap && team && (
+                <EscalationPolicy
+                  team={teamName}
+                  users={entityData?.usersHashMap}
+                />
+              )}
+              <TriggerDialog
+                routingKey={entityData?.foundRoutingKey?.routingKey ?? teamName}
+                showDialog={showDialog}
+                handleDialog={handleDialog}
+                onIncidentCreated={handleRefresh}
+              />
+            </CardContent>
+          </Card>
+        );
+      })}
     </>
   );
 };