Merge branch 'backstage:master' into topic/use-definition-name

packages/backend/package.json

@@ -56,7 +56,7 @@
     "@backstage/plugin-tech-insights-node": "^0.2.0",
     "@backstage/plugin-tech-insights-backend-module-jsonfc": "^0.1.6",
     "@backstage/plugin-todo-backend": "^0.1.19",
-    "@gitbeaker/node": "^34.6.0",
+    "@gitbeaker/node": "^35.1.0",
     "@octokit/rest": "^18.5.3",
     "azure-devops-node-api": "^11.0.1",
     "dockerode": "^3.3.1",

packages/core-components/package.json

@@ -33,7 +33,7 @@
     "@backstage/core-plugin-api": "^0.6.0",
     "@backstage/errors": "^0.2.0",
     "@backstage/theme": "^0.2.14",
-    "@material-table/core": "^4.3.19",
+    "@material-table/core": "^3.1.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
@@ -51,7 +51,7 @@
     "pluralize": "^8.0.0",
     "prop-types": "^15.7.2",
     "qs": "^6.9.4",
-    "rc-progress": "3.1.4",
+    "rc-progress": "3.2.4",
     "react-helmet": "6.1.0",
     "react-hook-form": "^7.12.2",
     "react-markdown": "^7.0.1",

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -284,6 +284,8 @@ function isButtonItem(
   return (props as SidebarItemLinkProps).to === undefined;
 }
 
+const sidebarSubmenuType = React.createElement(SidebarSubmenu).type;
+
 // TODO(Rugvip): Remove this once NavLink is updated in react-router-dom.
 //               This is needed because react-router doesn't handle the path comparison
 //               properly yet, matching for example /foobar with /foo.
@@ -486,7 +488,11 @@ const SidebarItemWithSubmenu = ({
 export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
   // Filter children for SidebarSubmenu components
   const [submenu] = useElementFilter(props.children, elements =>
-    elements.getElements().filter(child => child.type === SidebarSubmenu),
+    // Directly comparing child.type with SidebarSubmenu will not work with in
+    // combination with react-hot-loader
+    //
+    // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720
+    elements.getElements().filter(child => child.type === sidebarSubmenuType),
   );
 
   if (submenu) {

packages/core-components/src/layout/Sidebar/MobileSidebar.tsx

@@ -102,6 +102,8 @@ const sortSidebarGroupsForPriority = (children: React.ReactElement[]) =>
     'desc',
   );
 
+const sidebarGroupType = React.createElement(SidebarGroup).type;
+
 const OverlayMenu = ({
   children,
   label = 'Menu',
@@ -162,8 +164,13 @@ export const MobileSidebar = (props: MobileSidebarProps) => {
   }, [location.pathname]);
 
   // Filter children for SidebarGroups
+  //
+  // Directly comparing child.type with SidebarSubmenu will not work with in
+  // combination with react-hot-loader
+  //
+  // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720
   let sidebarGroups = useElementFilter(children, elements =>
-    elements.getElements().filter(child => child.type === SidebarGroup),
+    elements.getElements().filter(child => child.type === sidebarGroupType),
   );
 
   if (!children) {

packages/create-app/package.json

@@ -63,6 +63,7 @@
     "@backstage/plugin-auth-backend": "",
     "@backstage/plugin-catalog": "",
     "@backstage/plugin-catalog-backend": "",
+    "@backstage/plugin-catalog-graph": "",
     "@backstage/plugin-catalog-import": "",
     "@backstage/plugin-explore": "",
     "@backstage/plugin-github-actions": "",

packages/create-app/src/lib/versions.ts

@@ -51,6 +51,7 @@ import { version as pluginAuthBackend } from '../../../../plugins/auth-backend/p
 import { version as pluginCatalog } from '../../../../plugins/catalog/package.json';
 import { version as pluginCatalogReact } from '../../../../plugins/catalog-react/package.json';
 import { version as pluginCatalogBackend } from '../../../../plugins/catalog-backend/package.json';
+import { version as pluginCatalogGraph } from '../../../../plugins/catalog-graph/package.json';
 import { version as pluginCatalogImport } from '../../../../plugins/catalog-import/package.json';
 import { version as pluginCircleci } from '../../../../plugins/circleci/package.json';
 import { version as pluginExplore } from '../../../../plugins/explore/package.json';
@@ -90,6 +91,7 @@ export const packageVersions = {
   '@backstage/plugin-catalog': pluginCatalog,
   '@backstage/plugin-catalog-react': pluginCatalogReact,
   '@backstage/plugin-catalog-backend': pluginCatalogBackend,
+  '@backstage/plugin-catalog-graph': pluginCatalogGraph,
   '@backstage/plugin-catalog-import': pluginCatalogImport,
   '@backstage/plugin-circleci': pluginCircleci,
   '@backstage/plugin-explore': pluginExplore,

packages/create-app/templates/default-app/packages/app/package.json.hbs

@@ -13,6 +13,7 @@
     "@backstage/integration-react": "^{{version '@backstage/integration-react'}}",
     "@backstage/plugin-api-docs": "^{{version '@backstage/plugin-api-docs'}}",
     "@backstage/plugin-catalog": "^{{version '@backstage/plugin-catalog'}}",
+    "@backstage/plugin-catalog-graph": "^{{version '@backstage/plugin-catalog-graph'}}",
     "@backstage/plugin-catalog-import": "^{{version '@backstage/plugin-catalog-import'}}",
     "@backstage/plugin-catalog-react": "^{{version '@backstage/plugin-catalog-react'}}",
     "@backstage/plugin-github-actions": "^{{version '@backstage/plugin-github-actions'}}",

packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx

@@ -27,7 +27,6 @@ import {
   EntityAboutCard,
   EntityDependsOnComponentsCard,
   EntityDependsOnResourcesCard,
-  EntitySystemDiagramCard,
   EntityHasComponentsCard,
   EntityHasResourcesCard,
   EntityHasSubcomponentsCard,
@@ -54,6 +53,20 @@ import {
 } from '@backstage/plugin-org';
 import { EntityTechdocsContent } from '@backstage/plugin-techdocs';
 import { EmptyState } from '@backstage/core-components';
+import {
+  Direction,
+  EntityCatalogGraphCard,
+} from '@backstage/plugin-catalog-graph';
+import {
+  RELATION_API_CONSUMED_BY,
+  RELATION_API_PROVIDED_BY,
+  RELATION_CONSUMES_API,
+  RELATION_DEPENDENCY_OF,
+  RELATION_DEPENDS_ON,
+  RELATION_HAS_PART,
+  RELATION_PART_OF,
+  RELATION_PROVIDES_API,
+} from '@backstage/catalog-model';
 
 const cicdContent = (
   // This is an example of how you can implement your company's logic in entity page.
@@ -108,6 +121,10 @@ const overviewContent = (
     <Grid item md={6}>
       <EntityAboutCard variant="gridItem" />
     </Grid>
+    <Grid item md={6} xs={12}>
+      <EntityCatalogGraphCard variant="gridItem" height={400} />
+    </Grid>
+
     <Grid item md={4} xs={12}>
       <EntityLinksCard />
     </Grid>
@@ -223,6 +240,9 @@ const apiPage = (
         <Grid item md={6}>
           <EntityAboutCard />
         </Grid>
+        <Grid item md={6} xs={12}>
+          <EntityCatalogGraphCard variant="gridItem" height={400} />
+        </Grid>
         <Grid item md={4} xs={12}>
           <EntityLinksCard />
         </Grid>
@@ -290,6 +310,9 @@ const systemPage = (
         <Grid item md={6}>
           <EntityAboutCard variant="gridItem" />
         </Grid>
+        <Grid item md={6} xs={12}>
+          <EntityCatalogGraphCard variant="gridItem" height={400} />
+        </Grid>
         <Grid item md={6}>
           <EntityHasComponentsCard variant="gridItem" />
         </Grid>
@@ -302,7 +325,23 @@ const systemPage = (
       </Grid>
     </EntityLayout.Route>
     <EntityLayout.Route path="/diagram" title="Diagram">
-      <EntitySystemDiagramCard />
+      <EntityCatalogGraphCard
+        variant="gridItem"
+        direction={Direction.TOP_BOTTOM}
+        title="System Diagram"
+        height={700}
+        relations={[
+          RELATION_PART_OF,
+          RELATION_HAS_PART,
+          RELATION_API_CONSUMED_BY,
+          RELATION_API_PROVIDED_BY,
+          RELATION_CONSUMES_API,
+          RELATION_PROVIDES_API,
+          RELATION_DEPENDENCY_OF,
+          RELATION_DEPENDS_ON,
+        ]}
+        unidirectional={false}
+      />
     </EntityLayout.Route>
   </EntityLayout>
 );
@@ -315,6 +354,9 @@ const domainPage = (
         <Grid item md={6}>
           <EntityAboutCard variant="gridItem" />
         </Grid>
+        <Grid item md={6} xs={12}>
+          <EntityCatalogGraphCard variant="gridItem" height={400} />
+        </Grid>
         <Grid item md={6}>
           <EntityHasSystemsCard variant="gridItem" />
         </Grid>

packages/e2e-test/package.json

@@ -35,7 +35,7 @@
     "fs-extra": "9.1.0",
     "handlebars": "^4.7.3",
     "pgtools": "^0.3.0",
-    "puppeteer": "^10.4.0",
+    "puppeteer": "^13.1.1",
     "tree-kill": "^1.2.2",
     "ts-node": "^10.0.0"
   },