Merge branch 'master' of github.com:splunk/backstage into feature/update-splunk-on-call-invalid-team

plugins/splunk-on-call/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @backstage/plugin-splunk-on-call
 
+## 0.3.0
+
+### Minor Changes
+
+- 8aa0b6025: Updates the Splunk On-Call plugin for the [composability system
+  migration](https://backstage.io/docs/plugins/composability#porting-existing-plugins).
+
+  To upgrade, modify your `EntityPage` to use the updated export names. The
+  `EntitySplunkOnCallCard` should be wrapped in an `<EntitySwitch>` condition as
+  shown in the plugin README, which you may already have in place.
+
+  ```diff
+  import {
+  - isPluginApplicableToEntity as isSplunkOnCallAvailable,
+  +  isSplunkOnCallAvailable,
+  - SplunkOnCallCard
+  +  EntitySplunkOnCallCard,
+  } from '@backstage/plugin-splunk-on-call';
+
+  ...
+  -  <SplunkOnCallCard entity={entity}>
+  +  <EntitySplunkOnCallCard />
+  ```
+
+### Patch Changes
+
+- Updated dependencies [f7f7783a3]
+- Updated dependencies [65e6c4541]
+- Updated dependencies [68fdbf014]
+- Updated dependencies [5da6a561d]
+  - @backstage/catalog-model@0.7.10
+  - @backstage/core@0.7.10
+
+## 0.2.1
+
+### Patch Changes
+
+- 062bbf90f: chore: bump `@testing-library/user-event` from 12.8.3 to 13.1.8
+- 675a569a9: chore: bump `react-use` dependency in all packages
+- Updated dependencies [062bbf90f]
+- Updated dependencies [10c008a3a]
+- Updated dependencies [889d89b6e]
+- Updated dependencies [16be1d093]
+- Updated dependencies [3f988cb63]
+- Updated dependencies [675a569a9]
+  - @backstage/core@0.7.9
+  - @backstage/plugin-catalog-react@0.1.6
+  - @backstage/catalog-model@0.7.9
+
 ## 0.2.0
 
 ### Minor Changes

plugins/splunk-on-call/README.md

@@ -25,27 +25,24 @@ cd packages/app
 yarn add @backstage/plugin-splunk-on-call
 ```
 
-Add it to the app in `plugins.ts`:
-
-```ts
-export { plugin as SplunkOnCall } from '@backstage/plugin-splunk-on-call';
-```
-
-Add it to the `EntityPage.tsx`:
+Add it to your `EntityPage`:
 
 ```ts
+// packages/app/src/components/catalog/EntityPage.tsx
 import {
-  isPluginApplicableToEntity as isSplunkOnCallAvailable,
-  SplunkOnCallCard,
+  isSplunkOnCallAvailable,
+  EntitySplunkOnCallCard,
 } from '@backstage/plugin-splunk-on-call';
 // ...
-{
-  isSplunkOnCallAvailable(entity) && (
-    <Grid item md={6}>
-      <SplunkOnCallCard entity={entity} />
-    </Grid>
-  );
-}
+const overviewContent = (
+  <Grid container spacing={3} alignItems="stretch">
+    <EntitySwitch>
+      <EntitySwitch.Case if={isSplunkOnCallAvailable}>
+        <Grid item md={6}>
+          <EntitySplunkOnCallCard />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
 ```
 
 ## Client configuration

plugins/splunk-on-call/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-splunk-on-call",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -30,10 +30,10 @@
     "clean": "backstage-cli clean"
   },
   "dependencies": {
-    "@backstage/catalog-model": "^0.7.4",
-    "@backstage/core": "^0.7.7",
-    "@backstage/plugin-catalog-react": "^0.1.1",
-    "@backstage/theme": "^0.2.6",
+    "@backstage/catalog-model": "^0.7.10",
+    "@backstage/core": "^0.7.10",
+    "@backstage/plugin-catalog-react": "^0.1.6",
+    "@backstage/theme": "^0.2.7",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
@@ -42,15 +42,15 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "6.0.0-beta.0",
-    "react-use": "^15.3.3"
+    "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.6.9",
-    "@backstage/dev-utils": "^0.1.13",
-    "@backstage/test-utils": "^0.1.10",
+    "@backstage/cli": "^0.6.12",
+    "@backstage/dev-utils": "^0.1.15",
+    "@backstage/test-utils": "^0.1.12",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.0.7",
+    "@testing-library/user-event": "^13.1.8",
     "@types/jest": "^26.0.7",
     "@types/luxon": "^1.25.0",
     "@types/node": "^14.14.32",

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

@@ -14,10 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-import { render, waitFor, fireEvent, act } from '@testing-library/react';
-import { SplunkOnCallCard } from './SplunkOnCallCard';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import { Entity } from '@backstage/catalog-model';
-import { wrapInTestApp } from '@backstage/test-utils';
 import {
   alertApiRef,
   ApiProvider,
@@ -27,10 +25,12 @@ import {
   ConfigReader,
   createApiRef,
 } from '@backstage/core';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { wrapInTestApp } from '@backstage/test-utils';
 import {
   splunkOnCallApiRef,
-  UnauthorizedError,
   SplunkOnCallClient,
+  UnauthorizedError,
 } from '../api';
 import {
   ESCALATION_POLICIES,
@@ -39,6 +39,7 @@ import {
   MOCK_INCIDENT,
   MOCK_TEAM,
 } from '../api/mocks';
+import { EntitySplunkOnCallCard } from './EntitySplunkOnCallCard';
 
 const mockSplunkOnCallApi: Partial<SplunkOnCallClient> = {
   getUsers: async () => [],
@@ -65,15 +66,20 @@ const apis = ApiRegistry.from([
     }),
   ],
 ]);
-const entity: Entity = {
-  apiVersion: 'backstage.io/v1alpha1',
-  kind: 'Component',
-  metadata: {
-    name: 'splunkoncall-test',
-    annotations: {
-      'splunk.com/on-call-team': 'Example',
+
+const mockEntityData = {
+  loading: false,
+  error: undefined,
+  entity: {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      name: 'splunkoncall-test',
+      annotations: {
+        'splunk.com/on-call-team': 'Example',
+      },
     },
-  },
+  } as Entity,
 };
 
 describe('SplunkOnCallCard', () => {
@@ -85,7 +91,9 @@ describe('SplunkOnCallCard', () => {
     const { getByText, queryByTestId } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <SplunkOnCallCard entity={entity} />
+          <EntityContext.Provider value={mockEntityData}>
+            <EntitySplunkOnCallCard />
+          </EntityContext.Provider>
         </ApiProvider>,
       ),
     );
@@ -106,7 +114,9 @@ describe('SplunkOnCallCard', () => {
     const { getByText, queryByTestId } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <SplunkOnCallCard entity={entity} />
+          <EntityContext.Provider value={mockEntityData}>
+            <EntitySplunkOnCallCard />
+          </EntityContext.Provider>
         </ApiProvider>,
       ),
     );
@@ -123,7 +133,9 @@ describe('SplunkOnCallCard', () => {
     const { getByText, queryByTestId } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <SplunkOnCallCard entity={entity} />
+          <EntityContext.Provider value={mockEntityData}>
+            <EntitySplunkOnCallCard />
+          </EntityContext.Provider>
         </ApiProvider>,
       ),
     );
@@ -144,7 +156,9 @@ describe('SplunkOnCallCard', () => {
     const { getByText, queryByTestId, getByRole } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <SplunkOnCallCard entity={entity} />
+          <EntityContext.Provider value={mockEntityData}>
+            <EntitySplunkOnCallCard />
+          </EntityContext.Provider>
         </ApiProvider>,
       ),
     );

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

@@ -13,33 +13,34 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useAsync } from 'react-use';
 import {
-  useApi,
-  Progress,
-  HeaderIconLinkRow,
-  MissingAnnotationEmptyState,
   configApiRef,
   EmptyState,
+  HeaderIconLinkRow,
   IconLinkVerticalProps,
+  MissingAnnotationEmptyState,
+  Progress,
+  useApi,
 } from '@backstage/core';
 import { Entity } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import {
   Card,
+  CardContent,
   CardHeader,
   Divider,
-  CardContent,
   Typography,
 } from '@material-ui/core';
-import { Incidents } from './Incident';
-import { EscalationPolicy } from './Escalation';
+import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
 import WebIcon from '@material-ui/icons/Web';
-import { useAsync } from 'react-use';
 import { Alert } from '@material-ui/lab';
 import { splunkOnCallApiRef, UnauthorizedError } from '../api';
-import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
-import { TriggerDialog } from './TriggerDialog';
 import { MissingApiKeyOrApiIdError } from './Errors/MissingApiKeyOrApiIdError';
+import { EscalationPolicy } from './Escalation';
+import { Incidents } from './Incident';
+import { TriggerDialog } from './TriggerDialog';
 import { User } from './types';
 
 export const SPLUNK_ON_CALL_TEAM = 'splunk.com/on-call-team';
@@ -68,16 +69,13 @@ export const MissingEventsRestEndpoint = () => (
   </CardContent>
 );
 
-export const isPluginApplicableToEntity = (entity: Entity) =>
+export const isSplunkOnCallAvailable = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[SPLUNK_ON_CALL_TEAM]);
 
-type Props = {
-  entity: Entity;
-};
-
-export const SplunkOnCallCard = ({ entity }: Props) => {
+export const EntitySplunkOnCallCard = () => {
   const config = useApi(configApiRef);
   const api = useApi(splunkOnCallApiRef);
+  const { entity } = useEntity();
   const [showDialog, setShowDialog] = useState<boolean>(false);
   const [refreshIncidents, setRefreshIncidents] = useState<boolean>(false);
   const team = entity.metadata.annotations![SPLUNK_ON_CALL_TEAM];

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

@@ -23,8 +23,7 @@ import {
   Header,
   SupportButton,
 } from '@backstage/core';
-import { SplunkOnCallCard } from './SplunkOnCallCard';
-import { useEntity } from '@backstage/plugin-catalog-react';
+import { EntitySplunkOnCallCard } from './EntitySplunkOnCallCard';
 
 const useStyles = makeStyles(() => ({
   overflowXScroll: {
@@ -44,7 +43,6 @@ export const SplunkOnCallPage = ({
   pageTitle,
 }: SplunkOnCallPageProps): JSX.Element => {
   const classes = useStyles();
-  const { entity } = useEntity();
 
   return (
     <Page themeId="tool">
@@ -57,7 +55,7 @@ export const SplunkOnCallPage = ({
         </ContentHeader>
         <Grid container spacing={3} direction="row">
           <Grid item xs={12} sm={6} md={4}>
-            <SplunkOnCallCard entity={entity} />
+            <EntitySplunkOnCallCard />
           </Grid>
         </Grid>
       </Content>

plugins/splunk-on-call/src/index.ts

@@ -14,14 +14,12 @@
  * limitations under the License.
  */
 export {
+  EntitySplunkOnCallCard,
   splunkOnCallPlugin,
   splunkOnCallPlugin as plugin,
   SplunkOnCallPage,
 } from './plugin';
-export {
-  isPluginApplicableToEntity,
-  SplunkOnCallCard,
-} from './components/SplunkOnCallCard';
+export { isSplunkOnCallAvailable } from './components/EntitySplunkOnCallCard';
 export {
   SplunkOnCallClient,
   splunkOnCallApiRef,

plugins/splunk-on-call/src/plugin.ts

@@ -20,6 +20,7 @@ import {
   discoveryApiRef,
   configApiRef,
   createRoutableExtension,
+  createComponentExtension,
 } from '@backstage/core';
 import { splunkOnCallApiRef, SplunkOnCallClient } from './api';
 
@@ -49,3 +50,14 @@ export const SplunkOnCallPage = splunkOnCallPlugin.provide(
     mountPoint: rootRouteRef,
   }),
 );
+
+export const EntitySplunkOnCallCard = splunkOnCallPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/EntitySplunkOnCallCard').then(
+          m => m.EntitySplunkOnCallCard,
+        ),
+    },
+  }),
+);