catalog: rename EntityProvider to EntityLoaderProvider, and add new EntityProvider

Co-authored-by: blam <ben@blam.sh>

plugins/catalog/src/components/CatalogEntityPage/CatalogEntityPage.tsx

@@ -16,12 +16,12 @@
 
 import React from 'react';
 import { Outlet } from 'react-router';
-import { EntityProvider } from '../EntityProvider';
+import { EntityLoaderProvider } from '../EntityLoaderProvider';
 
 export const CatalogEntityPage = () => {
   return (
-    <EntityProvider>
+    <EntityLoaderProvider>
       <Outlet />
-    </EntityProvider>
+    </EntityLoaderProvider>
   );
 };

plugins/catalog/src/components/EntityLoaderProvider/EntityLoaderProvider.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { ReactNode } from 'react';
+import { useEntityFromUrl, EntityContext } from '../../hooks/useEntity';
+
+export const EntityLoaderProvider = ({ children }: { children: ReactNode }) => {
+  const { entity, loading, error } = useEntityFromUrl();
+
+  return (
+    <EntityContext.Provider value={{ entity, loading, error }}>
+      {children}
+    </EntityContext.Provider>
+  );
+};

plugins/catalog/src/components/EntityLoaderProvider/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { EntityLoaderProvider } from './EntityLoaderProvider';

plugins/catalog/src/components/EntityProvider/EntityProvider.tsx

@@ -13,15 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Entity } from '@backstage/catalog-model';
 import React, { ReactNode } from 'react';
-import { useEntityFromUrl, EntityContext } from '../../hooks/useEntity';
+import { EntityContext } from '../../hooks/useEntity';
 
-export const EntityProvider = ({ children }: { children: ReactNode }) => {
-  const { entity, loading, error } = useEntityFromUrl();
-
-  return (
-    <EntityContext.Provider value={{ entity, loading, error }}>
-      {children}
-    </EntityContext.Provider>
-  );
+type EntityProviderProps = {
+  entity: Entity;
+  children: ReactNode;
 };
+
+export const EntityProvider = ({ entity, children }: EntityProviderProps) => (
+  <EntityContext.Provider
+    value={{
+      entity,
+      loading: Boolean(entity),
+      error: undefined,
+    }}
+  >
+    {children}
+  </EntityContext.Provider>
+);

plugins/catalog/src/components/Router.tsx

@@ -23,7 +23,7 @@ import { entityRoute, rootRoute } from '../routes';
 import { CatalogPage } from './CatalogPage';
 import { EntityNotFound } from './EntityNotFound';
 import { EntityPageLayout } from './EntityPageLayout';
-import { EntityProvider } from './EntityProvider';
+import { EntityLoaderProvider } from './EntityLoaderProvider';
 
 const DefaultEntityPage = () => (
   <EntityPageLayout>
@@ -79,9 +79,9 @@ export const Router = ({
     <Route
       path={`${entityRoute.path}`}
       element={
-        <EntityProvider>
+        <EntityLoaderProvider>
           <EntityPageSwitch EntityPage={EntityPage} />
-        </EntityProvider>
+        </EntityLoaderProvider>
       }
     />
     <Route

plugins/catalog/src/hooks/useEntity.ts

@@ -55,7 +55,7 @@ export const useEntityFromUrl = (): EntityLoadingStatus => {
 };
 
 /**
- * Always going to return an entity, or throw an error if not a descendant of a EntityProvider.
+ * Grab Entity from the context and it's current loading state.
  */
 export const useEntity = () => {
   const { entity, loading, error } = useContext<{

plugins/catalog/src/index.ts

@@ -18,6 +18,7 @@ export * from '@backstage/catalog-client';
 export { AboutCard } from './components/AboutCard';
 export { EntityPageLayout } from './components/EntityPageLayout';
 export { EntityLayout } from './components/EntityLayout';
+export { EntityProvider } from './components/EntityProvider';
 export * from './components/EntitySwitch';
 export { Router } from './components/Router';
 export { useEntityCompoundName } from './components/useEntityCompoundName';