Move diagram to system page

Signed-off-by: Adam Harvey <adaharve@cisco.com>

.changeset/sour-plums-enjoy.md

@@ -0,0 +1,7 @@
+---
+'@backstage/create-app': patch
+---
+
+Fix system diagram card to be on the system page
+
+To apply the same fix to an existing application, in `EntityPage.tsx` simply move the `<EntityLayout.route>` for the `/diagram` path from the `groupPage` down into the `systemPage` element.

packages/app/src/components/catalog/EntityPage.tsx

@@ -441,10 +441,6 @@ const groupPage = (
         </Grid>
       </Grid>
     </EntityLayout.Route>
-
-    <EntityLayout.Route path="/diagram" title="Diagram">
-      <EntitySystemDiagramCard />
-    </EntityLayout.Route>
   </EntityLayoutWrapper>
 );
 
@@ -463,6 +459,9 @@ const systemPage = (
         </Grid>
       </Grid>
     </EntityLayout.Route>
+    <EntityLayout.Route path="/diagram" title="Diagram">
+      <EntitySystemDiagramCard />
+    </EntityLayout.Route>
   </EntityLayoutWrapper>
 );
 

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

@@ -208,10 +208,6 @@ const groupPage = (
         </Grid>
       </Grid>
     </EntityLayout.Route>
-
-    <EntityLayout.Route path="/diagram" title="Diagram">
-      <EntitySystemDiagramCard />
-    </EntityLayout.Route>
   </EntityLayout>
 );
 
@@ -230,6 +226,9 @@ const systemPage = (
         </Grid>
       </Grid>
     </EntityLayout.Route>
+    <EntityLayout.Route path="/diagram" title="Diagram">
+      <EntitySystemDiagramCard />
+    </EntityLayout.Route>
   </EntityLayout>
 );