From 8de66b48898c87efcc5fcd9596c3bba7a0d68359 Mon Sep 17 00:00:00 2001
From: Will Tsai <28876888+willtsai@users.noreply.github.com>
Date: Tue, 23 Jan 2024 10:41:44 -0800
Subject: [PATCH 1/3] add resource breadcrumbs

Signed-off-by: Will Tsai <28876888+willtsai@users.noreply.github.com>
---
 .../applications/ApplicationListPage.tsx      |  9 +++-
 .../environments/EnvironmentListPage.tsx      |  8 +++-
 .../ResourceBreadcrumbs.test.tsx              | 41 +++++++++++++++++++
 .../ResourceBreadcrumbs.tsx                   | 29 +++++++++++++
 .../components/resourcebreadcrumbs/index.ts   |  1 +
 .../resources/ApplicationResourcesTab.tsx     | 12 ++++--
 .../src/components/resources/DetailsTab.tsx   | 10 +++--
 .../src/components/resources/OverviewTab.tsx  | 20 +++++----
 8 files changed, 111 insertions(+), 19 deletions(-)
 create mode 100644 plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.test.tsx
 create mode 100644 plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.tsx
 create mode 100644 plugins/plugin-radius/src/components/resourcebreadcrumbs/index.ts

diff --git a/plugins/plugin-radius/src/components/applications/ApplicationListPage.tsx b/plugins/plugin-radius/src/components/applications/ApplicationListPage.tsx
index a278ffb..cba1818 100644
--- a/plugins/plugin-radius/src/components/applications/ApplicationListPage.tsx
+++ b/plugins/plugin-radius/src/components/applications/ApplicationListPage.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
-import { Grid } from '@material-ui/core';
-import { Header, Page, Content } from '@backstage/core-components';
+import { Grid, Typography } from '@material-ui/core';
+import { Header, Page, Content, Breadcrumbs, Link } from '@backstage/core-components';
 import { ResourceTable } from '../resourcetable';
 
 export const ApplicationListPage = () => (
   <Page themeId="radius-application-list">
     <Header title="Applications" subtitle="Displaying deployed applications." />
     <Content>
+    <Breadcrumbs aria-label="breadcrumb">
+      <Link to="/">Home</Link>
+      <Link to="/environments">Environments</Link>
+      <Typography>Applications</Typography>
+    </Breadcrumbs>
       <Grid container spacing={3} direction="column">
         <Grid item>
           <ResourceTable
diff --git a/plugins/plugin-radius/src/components/environments/EnvironmentListPage.tsx b/plugins/plugin-radius/src/components/environments/EnvironmentListPage.tsx
index 827b6aa..ebbd5de 100644
--- a/plugins/plugin-radius/src/components/environments/EnvironmentListPage.tsx
+++ b/plugins/plugin-radius/src/components/environments/EnvironmentListPage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Grid } from '@material-ui/core';
-import { Header, Page, Content } from '@backstage/core-components';
+import { Grid, Typography } from '@material-ui/core';
+import { Header, Page, Content, Breadcrumbs, Link } from '@backstage/core-components';
 import { ResourceTable } from '../resourcetable';
 
 export const EnvironmentListPage = () => (
@@ -10,6 +10,10 @@ export const EnvironmentListPage = () => (
       subtitle="Displaying environments where applications can be deployed."
     />
     <Content>
+      <Breadcrumbs aria-label="breadcrumb">
+        <Link to="/">Home</Link>
+        <Typography>Environments</Typography>
+      </Breadcrumbs>
       <Grid container spacing={3} direction="column">
         <Grid item>
           <ResourceTable
diff --git a/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.test.tsx b/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.test.tsx
new file mode 100644
index 0000000..9a2ce85
--- /dev/null
+++ b/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.test.tsx
@@ -0,0 +1,41 @@
+import { renderInTestApp } from "@backstage/test-utils";
+import { screen } from "@testing-library/react";
+import { ResourceBreadcrumbs } from "./ResourceBreadcrumbs";
+import React from "react";
+import { Resource } from "../../resources";
+import { resourcePageRouteRef } from "../../routes";
+
+describe('ResourceBreadcrumbs', () => {
+  it('should render breadcrumbs', async () => {
+    const resource: Resource<{ [key: string]: unknown }> = {
+      id: '/planes/radius/local/resourcegroups/default/providers/Applications.Datastores/redisCaches/uiCache',
+      name: 'uiCache',
+      type: 'Applications.Datastores/redisCaches',
+      properties: {
+        application: '/planes/radius/local/resourceGroups/default/providers/applications.core/applications/dashboard-app',
+        environment: '/planes/radius/local/resourceGroups/default/providers/applications.core/environments/default',
+      },
+      systemData: {},
+    };
+    const rendered = await renderInTestApp(<ResourceBreadcrumbs resource={resource} />, {
+      mountedRoutes: {
+        '/resource/:group/:namespace/:type/:name': resourcePageRouteRef,
+      },
+    });
+    expect(rendered.getByText('default')).toBeVisible();
+    expect(
+      screen.getByRole('link', { name: 'default' }),
+    ).toHaveAttribute(
+      'href',
+      '/resource/default/applications.core/environments/default',
+    );
+    expect(rendered.getByText('dashboard-app')).toBeVisible();
+    expect(
+      screen.getByRole('link', { name: 'dashboard-app' }),
+    ).toHaveAttribute(
+      'href',
+      '/resource/default/applications.core/applications/dashboard-app',
+    );
+  }
+  );
+});
\ No newline at end of file
diff --git a/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.tsx b/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.tsx
new file mode 100644
index 0000000..9719b34
--- /dev/null
+++ b/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Resource } from '../../resources';
+import { ResourceLink } from '../resourcelink';
+import { Breadcrumbs } from '@backstage/core-components';
+import { Typography } from '@material-ui/core';
+
+export const ResourceBreadcrumbs = (props: { resource: Resource }) => {
+  const breadcrumbs = [];
+
+  if (props.resource.properties?.environment as string) {
+    breadcrumbs.push(
+      <ResourceLink id={props.resource.properties?.environment as string} />,
+    );
+  }
+  if (props.resource.properties?.application as string) {
+    breadcrumbs.push(
+      <ResourceLink id={props.resource.properties?.application as string} />,
+    );
+  }
+
+  return (
+    <Breadcrumbs>
+      {breadcrumbs.map((breadcrumb, index) => (
+        <div key={index}>{breadcrumb}</div>
+      ))}
+      <Typography>{props.resource.name}</Typography>
+    </Breadcrumbs>
+  );
+};
diff --git a/plugins/plugin-radius/src/components/resourcebreadcrumbs/index.ts b/plugins/plugin-radius/src/components/resourcebreadcrumbs/index.ts
new file mode 100644
index 0000000..35a0051
--- /dev/null
+++ b/plugins/plugin-radius/src/components/resourcebreadcrumbs/index.ts
@@ -0,0 +1 @@
+export { ResourceBreadcrumbs } from './ResourceBreadcrumbs';
diff --git a/plugins/plugin-radius/src/components/resources/ApplicationResourcesTab.tsx b/plugins/plugin-radius/src/components/resources/ApplicationResourcesTab.tsx
index 6d2b09d..bcafaee 100644
--- a/plugins/plugin-radius/src/components/resources/ApplicationResourcesTab.tsx
+++ b/plugins/plugin-radius/src/components/resources/ApplicationResourcesTab.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Resource } from '../../resources';
 import { ResourceTable } from '../resourcetable';
+import { ResourceBreadcrumbs } from '../resourcebreadcrumbs';
 
 export const ApplicationResourcesTab = ({
   resource,
@@ -8,9 +9,12 @@ export const ApplicationResourcesTab = ({
   resource: Resource;
 }) => {
   return (
-    <ResourceTable
-      title="Application Resources"
-      filters={{ application: resource.id }}
-    />
+    <>
+      <ResourceBreadcrumbs resource={resource} />
+      <ResourceTable
+        title="Application Resources"
+        filters={{ application: resource.id }}
+      />
+    </>
   );
 };
diff --git a/plugins/plugin-radius/src/components/resources/DetailsTab.tsx b/plugins/plugin-radius/src/components/resources/DetailsTab.tsx
index 3429e4e..7c16554 100644
--- a/plugins/plugin-radius/src/components/resources/DetailsTab.tsx
+++ b/plugins/plugin-radius/src/components/resources/DetailsTab.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
 import { Resource } from '../../resources';
 import { InfoCard } from '@backstage/core-components';
+import { ResourceBreadcrumbs } from '../resourcebreadcrumbs';
 
 export const DetailsTab = (props: { resource: Resource }) => {
   return (
-    <InfoCard title="Resource Data">
-      <pre>{JSON.stringify(props.resource, null, 2)}</pre>
-    </InfoCard>
+    <>
+      <ResourceBreadcrumbs resource={props.resource} />
+      <InfoCard title="Resource Data">
+        <pre>{JSON.stringify(props.resource, null, 2)}</pre>
+      </InfoCard>
+    </>
   );
 };
diff --git a/plugins/plugin-radius/src/components/resources/OverviewTab.tsx b/plugins/plugin-radius/src/components/resources/OverviewTab.tsx
index 15e5d17..6e07579 100644
--- a/plugins/plugin-radius/src/components/resources/OverviewTab.tsx
+++ b/plugins/plugin-radius/src/components/resources/OverviewTab.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Resource, parseResourceId } from '../../resources';
 import { InfoCard, StructuredMetadataTable } from '@backstage/core-components';
 import { ResourceLink } from '../resourcelink/ResourceLink';
+import { ResourceBreadcrumbs } from '../resourcebreadcrumbs';
 
 export const OverviewTab = (props: { resource: Resource }) => {
   const metadata: { [key: string]: unknown } = {
@@ -10,20 +11,23 @@ export const OverviewTab = (props: { resource: Resource }) => {
     group: parseResourceId(props.resource.id)?.group,
   };
 
-  if (props.resource.properties?.application as string) {
-    metadata.application = (
-      <ResourceLink id={props.resource.properties?.application as string} />
-    );
-  }
   if (props.resource.properties?.environment as string) {
     metadata.environment = (
       <ResourceLink id={props.resource.properties?.environment as string} />
     );
   }
+  if (props.resource.properties?.application as string) {
+    metadata.application = (
+      <ResourceLink id={props.resource.properties?.application as string} />
+    );
+  }
 
   return (
-    <InfoCard title="Resource Overview">
-      <StructuredMetadataTable metadata={metadata} />
-    </InfoCard>
+    <>
+      <ResourceBreadcrumbs resource={props.resource} />
+      <InfoCard title="Resource Overview">
+          <StructuredMetadataTable metadata={metadata} />
+      </InfoCard>
+    </>
   );
 };

From 67c382714caee8ad6ddae365802ccad41f28542c Mon Sep 17 00:00:00 2001
From: Will Tsai <28876888+willtsai@users.noreply.github.com>
Date: Tue, 23 Jan 2024 11:59:25 -0800
Subject: [PATCH 2/3] address padding feedback

Signed-off-by: Will Tsai <28876888+willtsai@users.noreply.github.com>
---
 .../applications/ApplicationListPage.tsx      | 22 ++++++----
 .../environments/EnvironmentListPage.tsx      | 20 ++++++---
 .../ResourceBreadcrumbs.test.tsx              | 42 +++++++++----------
 .../resources/ApplicationResourcesTab.tsx     |  5 ++-
 .../src/components/resources/DetailsTab.tsx   |  7 +++-
 .../src/components/resources/OverviewTab.tsx  |  9 ++--
 6 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/plugins/plugin-radius/src/components/applications/ApplicationListPage.tsx b/plugins/plugin-radius/src/components/applications/ApplicationListPage.tsx
index cba1818..f716ace 100644
--- a/plugins/plugin-radius/src/components/applications/ApplicationListPage.tsx
+++ b/plugins/plugin-radius/src/components/applications/ApplicationListPage.tsx
@@ -1,17 +1,25 @@
 import React from 'react';
-import { Grid, Typography } from '@material-ui/core';
-import { Header, Page, Content, Breadcrumbs, Link } from '@backstage/core-components';
+import { Grid, Typography, Box } from '@material-ui/core';
+import {
+  Header,
+  Page,
+  Content,
+  Breadcrumbs,
+  Link,
+} from '@backstage/core-components';
 import { ResourceTable } from '../resourcetable';
 
 export const ApplicationListPage = () => (
   <Page themeId="radius-application-list">
     <Header title="Applications" subtitle="Displaying deployed applications." />
     <Content>
-    <Breadcrumbs aria-label="breadcrumb">
-      <Link to="/">Home</Link>
-      <Link to="/environments">Environments</Link>
-      <Typography>Applications</Typography>
-    </Breadcrumbs>
+      <Box mb={3}>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link to="/">Home</Link>
+          <Link to="/environments">Environments</Link>
+          <Typography>Applications</Typography>
+        </Breadcrumbs>
+      </Box>
       <Grid container spacing={3} direction="column">
         <Grid item>
           <ResourceTable
diff --git a/plugins/plugin-radius/src/components/environments/EnvironmentListPage.tsx b/plugins/plugin-radius/src/components/environments/EnvironmentListPage.tsx
index ebbd5de..cc14ebd 100644
--- a/plugins/plugin-radius/src/components/environments/EnvironmentListPage.tsx
+++ b/plugins/plugin-radius/src/components/environments/EnvironmentListPage.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import { Grid, Typography } from '@material-ui/core';
-import { Header, Page, Content, Breadcrumbs, Link } from '@backstage/core-components';
+import { Grid, Typography, Box } from '@material-ui/core';
+import {
+  Header,
+  Page,
+  Content,
+  Breadcrumbs,
+  Link,
+} from '@backstage/core-components';
 import { ResourceTable } from '../resourcetable';
 
 export const EnvironmentListPage = () => (
@@ -10,10 +16,12 @@ export const EnvironmentListPage = () => (
       subtitle="Displaying environments where applications can be deployed."
     />
     <Content>
-      <Breadcrumbs aria-label="breadcrumb">
-        <Link to="/">Home</Link>
-        <Typography>Environments</Typography>
-      </Breadcrumbs>
+      <Box mb={3}>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link to="/">Home</Link>
+          <Typography>Environments</Typography>
+        </Breadcrumbs>
+      </Box>
       <Grid container spacing={3} direction="column">
         <Grid item>
           <ResourceTable
diff --git a/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.test.tsx b/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.test.tsx
index 9a2ce85..7b86e0f 100644
--- a/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.test.tsx
+++ b/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.test.tsx
@@ -1,9 +1,9 @@
-import { renderInTestApp } from "@backstage/test-utils";
-import { screen } from "@testing-library/react";
-import { ResourceBreadcrumbs } from "./ResourceBreadcrumbs";
-import React from "react";
-import { Resource } from "../../resources";
-import { resourcePageRouteRef } from "../../routes";
+import { renderInTestApp } from '@backstage/test-utils';
+import { screen } from '@testing-library/react';
+import { ResourceBreadcrumbs } from './ResourceBreadcrumbs';
+import React from 'react';
+import { Resource } from '../../resources';
+import { resourcePageRouteRef } from '../../routes';
 
 describe('ResourceBreadcrumbs', () => {
   it('should render breadcrumbs', async () => {
@@ -12,30 +12,30 @@ describe('ResourceBreadcrumbs', () => {
       name: 'uiCache',
       type: 'Applications.Datastores/redisCaches',
       properties: {
-        application: '/planes/radius/local/resourceGroups/default/providers/applications.core/applications/dashboard-app',
-        environment: '/planes/radius/local/resourceGroups/default/providers/applications.core/environments/default',
+        application:
+          '/planes/radius/local/resourceGroups/default/providers/applications.core/applications/dashboard-app',
+        environment:
+          '/planes/radius/local/resourceGroups/default/providers/applications.core/environments/default',
       },
       systemData: {},
     };
-    const rendered = await renderInTestApp(<ResourceBreadcrumbs resource={resource} />, {
-      mountedRoutes: {
-        '/resource/:group/:namespace/:type/:name': resourcePageRouteRef,
+    const rendered = await renderInTestApp(
+      <ResourceBreadcrumbs resource={resource} />,
+      {
+        mountedRoutes: {
+          '/resource/:group/:namespace/:type/:name': resourcePageRouteRef,
+        },
       },
-    });
+    );
     expect(rendered.getByText('default')).toBeVisible();
-    expect(
-      screen.getByRole('link', { name: 'default' }),
-    ).toHaveAttribute(
+    expect(screen.getByRole('link', { name: 'default' })).toHaveAttribute(
       'href',
       '/resource/default/applications.core/environments/default',
     );
     expect(rendered.getByText('dashboard-app')).toBeVisible();
-    expect(
-      screen.getByRole('link', { name: 'dashboard-app' }),
-    ).toHaveAttribute(
+    expect(screen.getByRole('link', { name: 'dashboard-app' })).toHaveAttribute(
       'href',
       '/resource/default/applications.core/applications/dashboard-app',
     );
-  }
-  );
-});
\ No newline at end of file
+  });
+});
diff --git a/plugins/plugin-radius/src/components/resources/ApplicationResourcesTab.tsx b/plugins/plugin-radius/src/components/resources/ApplicationResourcesTab.tsx
index bcafaee..dfe537b 100644
--- a/plugins/plugin-radius/src/components/resources/ApplicationResourcesTab.tsx
+++ b/plugins/plugin-radius/src/components/resources/ApplicationResourcesTab.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Box } from '@material-ui/core';
 import { Resource } from '../../resources';
 import { ResourceTable } from '../resourcetable';
 import { ResourceBreadcrumbs } from '../resourcebreadcrumbs';
@@ -10,7 +11,9 @@ export const ApplicationResourcesTab = ({
 }) => {
   return (
     <>
-      <ResourceBreadcrumbs resource={resource} />
+      <Box mb={3}>
+        <ResourceBreadcrumbs resource={resource} />
+      </Box>
       <ResourceTable
         title="Application Resources"
         filters={{ application: resource.id }}
diff --git a/plugins/plugin-radius/src/components/resources/DetailsTab.tsx b/plugins/plugin-radius/src/components/resources/DetailsTab.tsx
index 7c16554..e122686 100644
--- a/plugins/plugin-radius/src/components/resources/DetailsTab.tsx
+++ b/plugins/plugin-radius/src/components/resources/DetailsTab.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
-import { Resource } from '../../resources';
+import { Box } from '@material-ui/core';
 import { InfoCard } from '@backstage/core-components';
+import { Resource } from '../../resources';
 import { ResourceBreadcrumbs } from '../resourcebreadcrumbs';
 
 export const DetailsTab = (props: { resource: Resource }) => {
   return (
     <>
-      <ResourceBreadcrumbs resource={props.resource} />
+      <Box mb={3}>
+        <ResourceBreadcrumbs resource={props.resource} />
+      </Box>
       <InfoCard title="Resource Data">
         <pre>{JSON.stringify(props.resource, null, 2)}</pre>
       </InfoCard>
diff --git a/plugins/plugin-radius/src/components/resources/OverviewTab.tsx b/plugins/plugin-radius/src/components/resources/OverviewTab.tsx
index 6e07579..414e77e 100644
--- a/plugins/plugin-radius/src/components/resources/OverviewTab.tsx
+++ b/plugins/plugin-radius/src/components/resources/OverviewTab.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Resource, parseResourceId } from '../../resources';
 import { InfoCard, StructuredMetadataTable } from '@backstage/core-components';
+import { Box } from '@material-ui/core';
+import { Resource, parseResourceId } from '../../resources';
 import { ResourceLink } from '../resourcelink/ResourceLink';
 import { ResourceBreadcrumbs } from '../resourcebreadcrumbs';
 
@@ -24,9 +25,11 @@ export const OverviewTab = (props: { resource: Resource }) => {
 
   return (
     <>
-      <ResourceBreadcrumbs resource={props.resource} />
+      <Box mb={3}>
+        <ResourceBreadcrumbs resource={props.resource} />
+      </Box>
       <InfoCard title="Resource Overview">
-          <StructuredMetadataTable metadata={metadata} />
+        <StructuredMetadataTable metadata={metadata} />
       </InfoCard>
     </>
   );

From 0a436393ccab555fc8c3c41cbbb2d455abcce8eb Mon Sep 17 00:00:00 2001
From: Will Tsai <28876888+willtsai@users.noreply.github.com>
Date: Tue, 23 Jan 2024 14:19:50 -0800
Subject: [PATCH 3/3] address link stacking feedback

Signed-off-by: Will Tsai <28876888+willtsai@users.noreply.github.com>
---
 .../ResourceBreadcrumbs.tsx                   | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.tsx b/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.tsx
index 9719b34..7f1cf4e 100644
--- a/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.tsx
+++ b/plugins/plugin-radius/src/components/resourcebreadcrumbs/ResourceBreadcrumbs.tsx
@@ -5,24 +5,14 @@ import { Breadcrumbs } from '@backstage/core-components';
 import { Typography } from '@material-ui/core';
 
 export const ResourceBreadcrumbs = (props: { resource: Resource }) => {
-  const breadcrumbs = [];
-
-  if (props.resource.properties?.environment as string) {
-    breadcrumbs.push(
-      <ResourceLink id={props.resource.properties?.environment as string} />,
-    );
-  }
-  if (props.resource.properties?.application as string) {
-    breadcrumbs.push(
-      <ResourceLink id={props.resource.properties?.application as string} />,
-    );
-  }
-
   return (
     <Breadcrumbs>
-      {breadcrumbs.map((breadcrumb, index) => (
-        <div key={index}>{breadcrumb}</div>
-      ))}
+      {props.resource.properties?.environment && (
+        <ResourceLink id={props.resource.properties?.environment as string} />
+      )}
+      {props.resource.properties?.application && (
+        <ResourceLink id={props.resource.properties?.application as string} />
+      )}
       <Typography>{props.resource.name}</Typography>
     </Breadcrumbs>
   );