removed usages of EntityContext in tests and stories

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx

@@ -15,7 +15,11 @@
  */
 import { CatalogApi } from '@backstage/catalog-client';
 import { Entity } from '@backstage/catalog-model';
-import { catalogApiRef, EntityContext } from '@backstage/plugin-catalog-react';
+import {
+  catalogApiRef,
+  EntityProvider,
+  AsyncEntityProvider,
+} from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { fireEvent } from '@testing-library/react';
 import React from 'react';
@@ -26,16 +30,12 @@ import { EntityLayout } from './EntityLayout';
 import { AlertApi, alertApiRef } from '@backstage/core-plugin-api';
 import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
 
-const mockEntityData = {
-  loading: false,
-  error: undefined,
-  entity: {
-    kind: 'MyKind',
-    metadata: {
-      name: 'my-entity',
-    },
-  } as Entity,
-};
+const mockEntity = {
+  kind: 'MyKind',
+  metadata: {
+    name: 'my-entity',
+  },
+} as Entity;
 
 const mockApis = ApiRegistry.with(catalogApiRef, {} as CatalogApi).with(
   alertApiRef,
@@ -46,13 +46,13 @@ describe('EntityLayout', () => {
   it('renders simplest case', async () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={mockApis}>
-        <EntityContext.Provider value={mockEntityData}>
+        <EntityProvider entity={mockEntity}>
           <EntityLayout>
             <EntityLayout.Route path="/" title="tabbed-test-title">
               <div>tabbed-test-content</div>
             </EntityLayout.Route>
           </EntityLayout>
-        </EntityContext.Provider>
+        </EntityProvider>
       </ApiProvider>,
     );
 
@@ -62,20 +62,15 @@ describe('EntityLayout', () => {
   });
 
   it('renders error message when entity is not found', async () => {
-    const noEntityData = {
-      ...mockEntityData,
-      entity: undefined,
-    };
-
     const rendered = await renderInTestApp(
       <ApiProvider apis={mockApis}>
-        <EntityContext.Provider value={noEntityData}>
+        <AsyncEntityProvider loading={false}>
           <EntityLayout>
             <EntityLayout.Route path="/" title="tabbed-test-title">
               <div>tabbed-test-content</div>
             </EntityLayout.Route>
           </EntityLayout>
-        </EntityContext.Provider>
+        </AsyncEntityProvider>
       </ApiProvider>,
     );
 
@@ -92,7 +87,7 @@ describe('EntityLayout', () => {
           path="/*"
           element={
             <ApiProvider apis={mockApis}>
-              <EntityContext.Provider value={mockEntityData}>
+              <EntityProvider entity={mockEntity}>
                 <EntityLayout>
                   <EntityLayout.Route path="/" title="tabbed-test-title">
                     <div>tabbed-test-content</div>
@@ -104,7 +99,7 @@ describe('EntityLayout', () => {
                     <div>tabbed-test-content-2</div>
                   </EntityLayout.Route>
                 </EntityLayout>
-              </EntityContext.Provider>
+              </EntityProvider>
             </ApiProvider>
           }
         />
@@ -129,7 +124,7 @@ describe('EntityLayout', () => {
 
     const rendered = await renderInTestApp(
       <ApiProvider apis={mockApis}>
-        <EntityContext.Provider value={mockEntityData}>
+        <EntityProvider entity={mockEntity}>
           <EntityLayout>
             <EntityLayout.Route path="/" title="tabbed-test-title">
               <div>tabbed-test-content</div>
@@ -149,7 +144,7 @@ describe('EntityLayout', () => {
               <div>tabbed-test-content-3</div>
             </EntityLayout.Route>
           </EntityLayout>
-        </EntityContext.Provider>
+        </EntityProvider>
       </ApiProvider>,
     );
 

plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Entity, EntityLink } from '@backstage/catalog-model';
-import { EntityContext } from '@backstage/plugin-catalog-react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import React from 'react';
 import { EntityLinksCard } from './EntityLinksCard';
@@ -40,17 +40,12 @@ describe('EntityLinksCard', () => {
 
   it('should render a link', async () => {
     const links: EntityLink[] = [createLink()];
-    const entityContextValue = {
-      entity: createEntity(links),
-      loading: false,
-      error: undefined,
-    };
 
     const { queryByText } = await renderWithEffects(
       wrapInTestApp(
-        <EntityContext.Provider value={entityContextValue}>
+        <EntityProvider entity={createEntity(links)}>
           <EntityLinksCard />
-        </EntityContext.Provider>,
+        </EntityProvider>,
       ),
     );
 
@@ -59,17 +54,11 @@ describe('EntityLinksCard', () => {
   });
 
   it('should show empty state', async () => {
-    const entityContextValue = {
-      entity: createEntity([]),
-      loading: false,
-      error: undefined,
-    };
-
     const { queryByText } = await renderWithEffects(
       wrapInTestApp(
-        <EntityContext.Provider value={entityContextValue}>
+        <EntityProvider entity={createEntity([])}>
           <EntityLinksCard />
-        </EntityContext.Provider>,
+        </EntityProvider>,
       ),
     );
 

plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { EntityContext } from '@backstage/plugin-catalog-react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { isKind } from './conditions';
@@ -46,15 +46,9 @@ describe('EntitySwitch', () => {
 
     const rendered = render(
       <Wrapper>
-        <EntityContext.Provider
-          value={{
-            entity: { kind: 'component' } as Entity,
-            loading: false,
-            error: undefined,
-          }}
-        >
+        <EntityProvider entity={{ kind: 'component' } as Entity}>
           {content}
-        </EntityContext.Provider>
+        </EntityProvider>
       </Wrapper>,
     );
 
@@ -64,15 +58,9 @@ describe('EntitySwitch', () => {
 
     rendered.rerender(
       <Wrapper>
-        <EntityContext.Provider
-          value={{
-            entity: { kind: 'template' } as Entity,
-            loading: false,
-            error: undefined,
-          }}
-        >
+        <EntityProvider entity={{ kind: 'template' } as Entity}>
           {content}
-        </EntityContext.Provider>
+        </EntityProvider>
       </Wrapper>,
     );
 
@@ -82,15 +70,9 @@ describe('EntitySwitch', () => {
 
     rendered.rerender(
       <Wrapper>
-        <EntityContext.Provider
-          value={{
-            entity: { kind: 'derp' } as Entity,
-            loading: false,
-            error: undefined,
-          }}
-        >
+        <EntityProvider entity={{ kind: 'derp' } as Entity}>
           {content}
-        </EntityContext.Provider>
+        </EntityProvider>
       </Wrapper>,
     );
 
@@ -100,20 +82,16 @@ describe('EntitySwitch', () => {
   });
 
   it('should switch child when filters switch', () => {
-    const entityContextValue = {
-      entity: { kind: 'component' } as Entity,
-      loading: false,
-      error: undefined,
-    };
+    const entity = { kind: 'component' } as Entity;
 
     const rendered = render(
       <Wrapper>
-        <EntityContext.Provider value={entityContextValue}>
+        <EntityProvider entity={entity}>
           <EntitySwitch>
             <EntitySwitch.Case if={isKind('component')} children="A" />
             <EntitySwitch.Case children="B" />
           </EntitySwitch>
-        </EntityContext.Provider>
+        </EntityProvider>
       </Wrapper>,
     );
 
@@ -122,12 +100,12 @@ describe('EntitySwitch', () => {
 
     rendered.rerender(
       <Wrapper>
-        <EntityContext.Provider value={entityContextValue}>
+        <EntityProvider entity={entity}>
           <EntitySwitch>
             <EntitySwitch.Case if={isKind('template')} children="A" />
             <EntitySwitch.Case children="B" />
           </EntitySwitch>
-        </EntityContext.Provider>
+        </EntityProvider>
       </Wrapper>,
     );
 

plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsForEntity.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Entity } from '@backstage/catalog-model';
-import { EntityContext } from '@backstage/plugin-catalog-react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { renderHook } from '@testing-library/react-hooks';
 import React, { PropsWithChildren } from 'react';
 import { useConsumerGroupsForEntity } from './useConsumerGroupsForEntity';
@@ -23,11 +23,7 @@ describe('useConsumerGroupOffsets', () => {
   let entity: Entity;
 
   const wrapper = ({ children }: PropsWithChildren<{}>) => {
-    return (
-      <EntityContext.Provider value={{ entity: entity, loading: false }}>
-        {children}
-      </EntityContext.Provider>
-    );
+    return <EntityProvider entity={entity}>{children}</EntityProvider>;
   };
 
   const subject = () => renderHook(useConsumerGroupsForEntity, { wrapper });

plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsOffsetsForEntity.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Entity } from '@backstage/catalog-model';
-import { EntityContext } from '@backstage/plugin-catalog-react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { renderHook } from '@testing-library/react-hooks';
 import { when } from 'jest-when';
 import React, { PropsWithChildren } from 'react';
@@ -65,9 +65,7 @@ describe('useConsumerGroupOffsets', () => {
           mockKafkaApi,
         )}
       >
-        <EntityContext.Provider value={{ entity: entity, loading: false }}>
-          {children}
-        </EntityContext.Provider>
+        <EntityProvider entity={entity}>{children}</EntityProvider>
       </ApiProvider>
     );
   };

plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { EntityContext } from '@backstage/plugin-catalog-react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core';
 import { render } from '@testing-library/react';
@@ -77,16 +77,14 @@ describe('<AuditListTableForEntity />', () => {
     },
   };
 
-  const subject = (value = {}) =>
+  const subject = () =>
     render(
       <ThemeProvider theme={lightTheme}>
         <MemoryRouter>
           <ApiProvider apis={apis}>
-            <EntityContext.Provider
-              value={{ entity: entity, loading: false, ...value }}
-            >
+            <EntityProvider entity={entity}>
               <AuditListForEntity />
-            </EntityContext.Provider>
+            </EntityProvider>
           </ApiProvider>
         </MemoryRouter>
       </ThemeProvider>,

plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { EntityContext } from '@backstage/plugin-catalog-react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core';
 import { render } from '@testing-library/react';
@@ -64,15 +64,13 @@ describe('<LastLighthouseAuditCard />', () => {
     },
   };
 
-  const subject = (value = {}) =>
+  const subject = () =>
     render(
       <ThemeProvider theme={lightTheme}>
         <MemoryRouter>
-          <EntityContext.Provider
-            value={{ entity: entity, loading: false, ...value }}
-          >
+          <EntityProvider entity={entity}>
             <LastLighthouseAuditCard />
-          </EntityContext.Provider>
+          </EntityProvider>
         </MemoryRouter>
       </ThemeProvider>,
     );

plugins/lighthouse/src/hooks/useWebsiteForEntity.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Entity } from '@backstage/catalog-model';
-import { EntityContext } from '@backstage/plugin-catalog-react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { renderHook } from '@testing-library/react-hooks';
 import React, { PropsWithChildren } from 'react';
 import { lighthouseApiRef, WebsiteListResponse } from '../api';
@@ -61,9 +61,7 @@ describe('useWebsiteForEntity', () => {
           mockLighthouseApi,
         )}
       >
-        <EntityContext.Provider value={{ entity: entity, loading: false }}>
-          {children}
-        </EntityContext.Provider>
+        <EntityProvider entity={entity}>{children}</EntityProvider>
       </ApiProvider>
     );
   };

plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import { GroupEntity } from '@backstage/catalog-model';
-import { EntityContext } from '@backstage/plugin-catalog-react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
@@ -57,12 +57,12 @@ const defaultEntity: GroupEntity = {
 
 export const Default = () => (
   <MemoryRouter>
-    <EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
+    <EntityProvider entity={defaultEntity}>
       <Grid container spacing={4}>
         <Grid item xs={12} md={4}>
           <GroupProfileCard variant="gridItem" />
         </Grid>
       </Grid>
-    </EntityContext.Provider>
+    </EntityProvider>
   </MemoryRouter>
 );

plugins/org/src/components/Cards/Group/MembersList/MembersListCard.stories.tsx

@@ -16,7 +16,7 @@
 
 import { Entity, GroupEntity } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
-import { catalogApiRef, EntityContext } from '@backstage/plugin-catalog-react';
+import { catalogApiRef, EntityProvider } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
@@ -105,13 +105,13 @@ const apiRegistry = (items: Entity[]) =>
 export const Default = () => (
   <MemoryRouter>
     <ApiProvider apis={apiRegistry([alice, bob])}>
-      <EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
+      <EntityProvider entity={defaultEntity}>
         <Grid container spacing={4}>
           <Grid item xs={12} md={6}>
             <MembersListCard />
           </Grid>
         </Grid>
-      </EntityContext.Provider>
+      </EntityProvider>
     </ApiProvider>
   </MemoryRouter>
 );
@@ -119,13 +119,13 @@ export const Default = () => (
 export const Empty = () => (
   <MemoryRouter>
     <ApiProvider apis={apiRegistry([])}>
-      <EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
+      <EntityProvider entity={defaultEntity}>
         <Grid container spacing={4}>
           <Grid item xs={12} md={6}>
             <MembersListCard />
           </Grid>
         </Grid>
-      </EntityContext.Provider>
+      </EntityProvider>
     </ApiProvider>
   </MemoryRouter>
 );

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx

@@ -20,7 +20,7 @@ import {
   CatalogApi,
   catalogApiRef,
   catalogRouteRef,
-  EntityContext,
+  EntityProvider,
 } from '@backstage/plugin-catalog-react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import {
@@ -91,13 +91,13 @@ const apiRegistry = ApiRegistry.from([[catalogApiRef, catalogApi]]);
 export const Default = () =>
   wrapInTestApp(
     <ApiProvider apis={apiRegistry}>
-      <EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
+      <EntityProvider entity={defaultEntity}>
         <Grid container spacing={4}>
           <Grid item xs={12} md={6}>
             <OwnershipCard />
           </Grid>
         </Grid>
-      </EntityContext.Provider>
+      </EntityProvider>
     </ApiProvider>,
     {
       mountedRoutes: { '/catalog': catalogRouteRef },
@@ -124,15 +124,13 @@ export const Themed = () =>
   wrapInTestApp(
     <ThemeProvider theme={monochromeTheme}>
       <ApiProvider apis={apiRegistry}>
-        <EntityContext.Provider
-          value={{ entity: defaultEntity, loading: false }}
-        >
+        <EntityProvider entity={defaultEntity}>
           <Grid container spacing={4}>
             <Grid item xs={12} md={6}>
               <OwnershipCard />
             </Grid>
           </Grid>
-        </EntityContext.Provider>
+        </EntityProvider>
       </ApiProvider>
     </ThemeProvider>,
     {

plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import { UserEntity } from '@backstage/catalog-model';
-import { EntityContext } from '@backstage/plugin-catalog-react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
@@ -55,13 +55,13 @@ const defaultEntity: UserEntity = {
 
 export const Default = () => (
   <MemoryRouter>
-    <EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
+    <EntityProvider entity={defaultEntity}>
       <Grid container spacing={4}>
         <Grid item xs={12} md={4}>
           <UserProfileCard variant="gridItem" />
         </Grid>
       </Grid>
-    </EntityContext.Provider>
+    </EntityProvider>
   </MemoryRouter>
 );
 
@@ -83,12 +83,12 @@ const noImageEntity: UserEntity = {
 
 export const NoImage = () => (
   <MemoryRouter>
-    <EntityContext.Provider value={{ entity: noImageEntity, loading: false }}>
+    <EntityProvider entity={noImageEntity}>
       <Grid container spacing={4}>
         <Grid item xs={12} md={4}>
           <UserProfileCard variant="gridItem" />
         </Grid>
       </Grid>
-    </EntityContext.Provider>
+    </EntityProvider>
   </MemoryRouter>
 );

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

@@ -16,7 +16,7 @@
 import React from 'react';
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import { Entity } from '@backstage/catalog-model';
-import { EntityContext } from '@backstage/plugin-catalog-react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import {
   splunkOnCallApiRef,
@@ -71,35 +71,27 @@ const apis = ApiRegistry.from([
   ],
 ]);
 
-const mockEntityData = {
-  loading: false,
-  error: undefined,
-  entity: {
-    apiVersion: 'backstage.io/v1alpha1',
-    kind: 'Component',
-    metadata: {
-      name: 'splunkoncall-test',
-      annotations: {
-        'splunk.com/on-call-team': 'test',
-      },
+const mockEntity = {
+  apiVersion: 'backstage.io/v1alpha1',
+  kind: 'Component',
+  metadata: {
+    name: 'splunkoncall-test',
+    annotations: {
+      'splunk.com/on-call-team': 'test',
     },
-  } as Entity,
-};
+  },
+} as Entity;
 
-const mockEntityDataNoIncidents = {
-  loading: false,
-  error: undefined,
-  entity: {
-    apiVersion: 'backstage.io/v1alpha1',
-    kind: 'Component',
-    metadata: {
-      name: 'splunkoncall-test',
-      annotations: {
-        'splunk.com/on-call-team': 'test-noincidents',
-      },
+const mockEntityNoIncidents = {
+  apiVersion: 'backstage.io/v1alpha1',
+  kind: 'Component',
+  metadata: {
+    name: 'splunkoncall-test',
+    annotations: {
+      'splunk.com/on-call-team': 'test-noincidents',
     },
-  } as Entity,
-};
+  },
+} as Entity;
 
 describe('SplunkOnCallCard', () => {
   it('Render splunkoncall', async () => {
@@ -113,9 +105,9 @@ describe('SplunkOnCallCard', () => {
     const { getByText, queryByTestId } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <EntityContext.Provider value={mockEntityDataNoIncidents}>
+          <EntityProvider entity={mockEntityNoIncidents}>
             <EntitySplunkOnCallCard />
-          </EntityContext.Provider>
+          </EntityProvider>
         </ApiProvider>,
       ),
     );
@@ -136,9 +128,9 @@ describe('SplunkOnCallCard', () => {
     const { getByText, queryByTestId } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <EntityContext.Provider value={mockEntityData}>
+          <EntityProvider entity={mockEntity}>
             <EntitySplunkOnCallCard />
-          </EntityContext.Provider>
+          </EntityProvider>
         </ApiProvider>,
       ),
     );
@@ -155,9 +147,9 @@ describe('SplunkOnCallCard', () => {
     const { getByText, queryByTestId } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <EntityContext.Provider value={mockEntityData}>
+          <EntityProvider entity={mockEntity}>
             <EntitySplunkOnCallCard />
-          </EntityContext.Provider>
+          </EntityProvider>
         </ApiProvider>,
       ),
     );
@@ -181,9 +173,9 @@ describe('SplunkOnCallCard', () => {
     const { getByText, queryByTestId } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <EntityContext.Provider value={mockEntityData}>
+          <EntityProvider entity={mockEntity}>
             <EntitySplunkOnCallCard />
-          </EntityContext.Provider>
+          </EntityProvider>
         </ApiProvider>,
       ),
     );
@@ -204,9 +196,9 @@ describe('SplunkOnCallCard', () => {
     const { getByText, queryByTestId, getByRole } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <EntityContext.Provider value={mockEntityData}>
+          <EntityProvider entity={mockEntity}>
             <EntitySplunkOnCallCard />
-          </EntityContext.Provider>
+          </EntityProvider>
         </ApiProvider>,
       ),
     );