From 416affb607d355d2568f950d0fd9279faa507006 Mon Sep 17 00:00:00 2001
From: Brian Fletcher <brian@roadie.io>
Date: Tue, 13 Dec 2022 14:17:21 +0000
Subject: [PATCH] review comments

Signed-off-by: Brian Fletcher <brian@roadie.io>
---
 .changeset/red-tables-train.md                |   4 +-
 .../EntityPeekAheadPopover.stories.tsx        |   2 +-
 .../EntityRefLink/EntityRefLink.stories.tsx   | 125 ++++++++++++++++++
 3 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.stories.tsx

diff --git a/.changeset/red-tables-train.md b/.changeset/red-tables-train.md
index 1aadde75cf..c2beceb3e7 100644
--- a/.changeset/red-tables-train.md
+++ b/.changeset/red-tables-train.md
@@ -2,4 +2,6 @@
 '@backstage/plugin-catalog-react': patch
 ---
 
-Add pop over on the `EntityRefLink` component. It shows a more details about the associated entity.
+Add pop over on the `EntityRefLink` component. It shows more details about the associated entity. See the playbook here https://backstage.io/storybook/?path=/story/catalog-entityreflink--default
+
+Add a reuseable pop over `EntityPeekAheadPopover` component. It shows more details about the associated entity. See the playbook here https://backstage.io/storybook/?path=/story/catalog-entitypeekaheadpopover--default
diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx
index c44a31a743..bb24f293cb 100644
--- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx
+++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright 2020 The Backstage Authors
+ * Copyright 2022 The Backstage Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.stories.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.stories.tsx
new file mode 100644
index 0000000000..e09bf89382
--- /dev/null
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.stories.tsx
@@ -0,0 +1,125 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * 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, { ComponentType } from 'react';
+import { EntityRefLink, EntityRefLinkProps } from './EntityRefLink';
+import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils';
+import { catalogApiRef } from '../../api';
+import { CompoundEntityRef } from '@backstage/catalog-model';
+import { entityRouteRef } from '../../routes';
+import { CatalogApi } from '@backstage/catalog-client';
+
+const mockCatalogApi = {
+  getEntityByRef: async (entityRef: CompoundEntityRef) => {
+    if (
+      entityRef.namespace === 'default' &&
+      entityRef.name === 'playback' &&
+      entityRef.kind === 'component'
+    ) {
+      return {
+        kind: 'Component',
+        metadata: {
+          name: 'playback',
+          namespace: 'default',
+          description: 'Details about the playback service',
+        },
+      };
+    }
+    if (
+      entityRef.namespace === 'default' &&
+      entityRef.name === 'fname.lname' &&
+      entityRef.kind === 'user'
+    ) {
+      return {
+        kind: 'User',
+        metadata: {
+          name: 'fname.lname',
+          namespace: 'default',
+        },
+        spec: {
+          profile: {
+            email: 'fname.lname@example.com',
+          },
+        },
+      };
+    }
+    if (
+      entityRef.namespace === 'default' &&
+      entityRef.name === 'slow.catalog.item' &&
+      entityRef.kind === 'component'
+    ) {
+      await new Promise(resolve => setTimeout(resolve, 3000));
+      return {
+        kind: 'Component',
+        metadata: {
+          name: 'slow.catalog.item',
+          namespace: 'default',
+          description: 'Details about the slow.catalog.item service',
+        },
+      };
+    }
+    return undefined;
+  },
+};
+
+const defaultArgs = {
+  entityRef: 'component:default/playback',
+};
+
+export default {
+  title: 'Catalog /EntityRefLink',
+  decorators: [
+    (Story: ComponentType<{}>) =>
+      wrapInTestApp(
+        <>
+          <TestApiProvider
+            apis={[[catalogApiRef, mockCatalogApi as any as CatalogApi]]}
+          >
+            <Story />
+          </TestApiProvider>
+        </>,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
+      ),
+  ],
+};
+
+export const Default = (args: EntityRefLinkProps) => (
+  <EntityRefLink {...args} />
+);
+Default.args = defaultArgs;
+
+export const User = (args: EntityRefLinkProps) => <EntityRefLink {...args} />;
+User.args = {
+  entityRef: 'user:default/fname.lname',
+};
+
+export const NotFound = (args: EntityRefLinkProps) => (
+  <EntityRefLink {...args} />
+);
+NotFound.args = {
+  entityRef: 'user:default/doesnt.exist',
+};
+
+export const SlowCatalogItem = (args: EntityRefLinkProps) => (
+  <EntityRefLink {...args} />
+);
+SlowCatalogItem.args = {
+  entityRef: 'component:default/slow.catalog.item',
+};