Merge pull request #15865 from RoadieHQ/tweak-splunk-on-call

Tweak splunk on call

.changeset/young-singers-learn.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-splunk-on-call': patch
+---
+
+Refactor plugin Card component to not rerender contents unnecessarily.

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 {
@@ -219,37 +219,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,
@@ -267,30 +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}
+      {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>
+        );
+      })}
     </>
   );
 };