add resource breadcrumbs

plugins/plugin-radius/src/components/applications/ApplicationListPage.tsx

@@ -1,12 +1,25 @@
 import React from 'react';
-import { Grid } from '@material-ui/core';
-import { Header, Page, Content } 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>
+      <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

plugins/plugin-radius/src/components/environments/EnvironmentListPage.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
-import { Grid } from '@material-ui/core';
-import { Header, Page, Content } 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,6 +16,12 @@ export const EnvironmentListPage = () => (
       subtitle="Displaying environments where applications can be deployed."
     />
     <Content>
+      <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

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',
+    );
+  });
+});

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>
+  );
+};

plugins/plugin-radius/src/components/resourcebreadcrumbs/index.ts

@@ -0,0 +1 @@
+export { ResourceBreadcrumbs } from './ResourceBreadcrumbs';

plugins/plugin-radius/src/components/resources/ApplicationResourcesTab.tsx

@@ -1,16 +1,23 @@
 import React from 'react';
+import { Box } from '@material-ui/core';
 import { Resource } from '../../resources';
 import { ResourceTable } from '../resourcetable';
+import { ResourceBreadcrumbs } from '../resourcebreadcrumbs';
 
 export const ApplicationResourcesTab = ({
   resource,
 }: {
   resource: Resource;
 }) => {
   return (
-    <ResourceTable
-      title="Application Resources"
-      filters={{ application: resource.id }}
-    />
+    <>
+      <Box mb={3}>
+        <ResourceBreadcrumbs resource={resource} />
+      </Box>
+      <ResourceTable
+        title="Application Resources"
+        filters={{ application: resource.id }}
+      />
+    </>
   );
 };

plugins/plugin-radius/src/components/resources/DetailsTab.tsx

@@ -1,11 +1,18 @@
 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 (
-    <InfoCard title="Resource Data">
-      <pre>{JSON.stringify(props.resource, null, 2)}</pre>
-    </InfoCard>
+    <>
+      <Box mb={3}>
+        <ResourceBreadcrumbs resource={props.resource} />
+      </Box>
+      <InfoCard title="Resource Data">
+        <pre>{JSON.stringify(props.resource, null, 2)}</pre>
+      </InfoCard>
+    </>
   );
 };

plugins/plugin-radius/src/components/resources/OverviewTab.tsx

@@ -1,7 +1,9 @@
 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';
 
 export const OverviewTab = (props: { resource: Resource }) => {
   const metadata: { [key: string]: unknown } = {
@@ -10,20 +12,25 @@ 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>
+    <>
+      <Box mb={3}>
+        <ResourceBreadcrumbs resource={props.resource} />
+      </Box>
+      <InfoCard title="Resource Overview">
+        <StructuredMetadataTable metadata={metadata} />
+      </InfoCard>
+    </>
   );
 };