improve EntitySplunkOnCallCard props

* export the props
* rename the props to match component,
* unpack the props inside the function
* mark both with `/** public */`

...per code review feedback here:
https://github.com/backstage/backstage/pull/9635#discussion_r813155577

Signed-off-by: Mike Ball <mikedball@gmail.com>

plugins/splunk-on-call/api-report.md

@@ -12,14 +12,13 @@ import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { Entity } from '@backstage/catalog-model';
 import { RouteRef } from '@backstage/core-plugin-api';
 
+// Warning: (ae-forgotten-export) The symbol "EntitySplunkOnCallCardProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "EntitySplunkOnCallCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const EntitySplunkOnCallCard: ({
-  readOnly,
-}: {
-  readOnly?: boolean | undefined;
-}) => JSX.Element;
+export const EntitySplunkOnCallCard: (
+  props: EntitySplunkOnCallCardProps,
+) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "isSplunkOnCallAvailable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx

@@ -109,12 +109,14 @@ const useStyles = makeStyles({
   },
 });
 
-type Props = {
+/** @public */
+export type EntitySplunkOnCallCardProps = {
   readOnly?: boolean;
 };
 
-export const EntitySplunkOnCallCard = ({ readOnly }: Props) => {
-  const readOnlyMode = readOnly || false;
+/** @public */
+export const EntitySplunkOnCallCard = (props: EntitySplunkOnCallCardProps) => {
+  const { readOnly } = props;
   const classes = useStyles();
   const config = useApi(configApiRef);
   const api = useApi(splunkOnCallApiRef);
@@ -224,7 +226,7 @@ export const EntitySplunkOnCallCard = ({ readOnly }: Props) => {
     return (
       <>
         <Incidents
-          readOnly={readOnlyMode}
+          readOnly={readOnly || false}
           team={teamName}
           refreshIncidents={refreshIncidents}
         />