feat(dynamic-plugins): make mountpoints and layout declarative

.changeset/bright-crabs-crash.md

@@ -0,0 +1,43 @@
+---
+'app': major
+---
+
+Use dynamic frontend plugins across the app:
+
+1. Dynamic routes support home `/` override. You can define additional routes via `dynamicPlugins.frontend.dynamicRoutes` - these can't already exists in the app with 1 exception - `/`. This allows you to override the home page with your own plugin/component.
+
+2. This change makes `dynamicPlugins.frontend.mountPoints` generic and declarative:
+
+   Mountpoint now support following names/types:
+
+   - Allow passing `*/context` mountpoints for React context
+   - Allow passing `*/cards` for Card components (with layout)
+
+   Mountpoint configs:
+
+   - `entity.page.overview`
+   - `entity.page.topology`
+   - `entity.page.issues`
+   - `entity.page.pull-requests`
+   - `entity.page.ci`
+   - `entity.page.cd`
+   - `entity.page.kubernetes`
+   - `entity.page.tekton`
+   - `entity.page.image-registry`
+   - `entity.page.monitoring`
+   - `entity.page.lighthouse`
+   - `entity.page.api`
+   - `entity.page.dependencies`
+   - `entity.page.docs`
+   - `entity.page.definition`
+   - `entity.page.diagram`
+
+   Mountpoints support following configuration:
+
+   - `layout` for layout features that propagates to <Box sx=... /> allowing users to use CSS properties gridColumnStart including responsiveness queries etc. (mui.com/system/ getting-started/the-sx-prop)
+   - `if` for EntitySwitch.Case if=... - allows allOf|anyOf|oneOf conditionals with isKind|isType|hasAnnotation builtin methods or code imports via Scalprum (direct string reference)
+   - `props` to pass additional props to the mounted component
+
+   Current limitations of the dynamic frontend plugins:
+
+   Allows you to mount to existing mountPoints only. You're unable to create additional tabs for example. (will be addressed in a follow up PR)

app-config.dynamic-plugins.yaml

@@ -0,0 +1,301 @@
+## Arbitrary app-config for backwards compatible UI configuration - now with dynamic plugins
+dynamicPlugins:
+  frontend:
+    backstage.plugin-azure-devops:
+      mountPoints:
+        - mountPoint: entity.page.ci/cards
+          importName: EntityAzurePipelinesContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isAzureDevOpsAvailable
+        - mountPoint: entity.page.pull-requests/cards
+          importName: EntityAzurePullRequestsContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isAzureDevOpsAvailable
+    backstage.plugin-dynatrace:
+      mountPoints:
+        - mountPoint: entity.page.monitoring/cards
+          importName: DynatraceTab
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isDynatraceAvailable
+    backstage.plugin-github-actions:
+      mountPoints:
+        - mountPoint: entity.page.ci/cards
+          importName: EntityGithubActionsContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isGithubActionsAvailable
+    backstage.plugin-github-issues:
+      mountPoints:
+        - mountPoint: entity.page.issues/cards
+          importName: GithubIssuesCard
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - hasAnnotation: github.com/project-slug
+    backstage.plugin-jenkins:
+      mountPoints:
+        - mountPoint: entity.page.ci/cards
+          importName: EntityJenkinsContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isJenkinsAvailable
+    backstage.plugin-kubernetes:
+      mountPoints:
+        - mountPoint: entity.page.kubernetes/cards
+          importName: EntityKubernetesContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              anyOf:
+                - hasAnnotation: backstage.io/kubernetes-id
+                - hasAnnotation: backstage.io/kubernetes-namespace
+    backstage.plugin-lighthouse:
+      dynamicRoutes:
+        - path: /lighthouse
+          importName: LighthousePage
+          menuItem:
+            icon: Assessment
+            text: Lighthouse
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          importName: EntityLastLighthouseAuditCard
+          config:
+            layout:
+              gridColumnEnd: "span 6"
+            if:
+              allOf:
+                - isLighthouseAvailable
+    backstage.plugin-pagerduty:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          importName: EntityPagerDutyCard
+          config:
+            layout:
+              gridColumnEnd: "span 6"
+            if:
+              allOf:
+                - isPluginApplicableToEntity
+    backstage.plugin-sonarqube:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          importName: EntitySonarQubeCard
+          config:
+            layout:
+              gridColumnStart: "span 4"
+              gridRowEnd: "span 2"
+            if:
+              allOf:
+                - isSonarQubeAvailable
+    immobiliarelabs.backstage-plugin-gitlab:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          importName: EntityGitlabMergeRequestStatsCard
+          config:
+            layout:
+              gridRowEnd: "span 2"
+              gridColumnStart: "span 4"
+            if:
+              allOf:
+                - isGitlabAvailable
+        - mountPoint: entity.page.ci/cards
+          importName: EntityGitlabPipelinesTable
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isGitlabAvailable
+        - mountPoint: entity.page.issues/cards
+          importName: EntityGitlabIssuesTable
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isGitlabAvailable
+        - mountPoint: entity.page.pull-requests/cards
+          importName: EntityGitlabMergeRequestsTable
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isGitlabAvailable
+    janus-idp.backstage-plugin-jfrog-artifactory:
+      mountPoints:
+        - mountPoint: entity.page.image-registry/cards
+          importName: JfrogArtifactoryPage
+          config:
+            layout:
+              gridColumn: 1 / -1
+            if:
+              anyOf:
+              - isJfrogArtifactoryAvailable
+    janus-idp.backstage-plugin-nexus-repository-manager:
+      mountPoints:
+        - mountPoint: entity.page.image-registry/cards
+          importName: NexusRepositoryManagerPage
+          config:
+            layout:
+              gridColumn: 1 / -1
+            if:
+              anyOf:
+              - isNexusRepositoryManagerAvailable
+    janus-idp.backstage-plugin-ocm:
+      dynamicRoutes:
+        - path: /ocm
+          importName: OcmPage
+          menuItem:
+            icon: Storage
+            text: Clusters
+      mountPoints:
+        - mountPoint: entity.page.overview/context
+          importName: ClusterContextProvider
+        - mountPoint: entity.page.overview/cards
+          importName: ClusterAvailableResourceCard
+          config:
+            layout:
+              gridRowStart: 1
+              gridColumnStart: "span 1"
+            if:
+              anyOf:
+              - isKind: resource
+              - isType: kubernetes-cluster
+        - mountPoint: entity.page.overview/cards
+          importName: ClusterInfoCard
+          config:
+            if:
+              allOf:
+              - isKind: resource
+              - isType: kubernetes-cluster
+    janus-idp.backstage-plugin-quay:
+      mountPoints:
+        - mountPoint: entity.page.image-registry/cards
+          importName: QuayPage
+          config:
+            layout:
+              gridColumn: 1 / -1
+            if:
+              anyOf:
+              - isQuayAvailable
+    janus-idp.backstage-plugin-tekton:
+      mountPoints:
+        - mountPoint: entity.page.ci/cards
+          importName: TektonCI
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isTektonCIAvailable
+    janus-idp.backstage-plugin-topology:
+      mountPoints:
+        - mountPoint: entity.page.topology/cards
+          importName: TopologyPage
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              anyOf:
+                - hasAnnotation: backstage.io/kubernetes-id
+                - hasAnnotation: backstage.io/kubernetes-namespace
+    roadiehq.backstage-plugin-argo-cd:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          importName: EntityArgoCDOverviewCard
+          config:
+            layout:
+              gridColumn: "1 / span 8"
+            if:
+              allOf:
+                - isArgocdAvailable
+        - mountPoint: entity.page.cd/cards
+          importName: EntityArgoCDHistoryCard
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isArgocdAvailable
+    roadiehq.backstage-plugin-datadog:
+      mountPoints:
+        - mountPoint: entity.page.monitoring/cards
+          importName: EntityDatadogContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isDatadogAvailable
+    roadiehq.backstage-plugin-github-insights:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          importName: EntityGithubInsightsComplianceCard
+          config:
+            layout:
+              gridRowEnd: "span 2"
+              gridColumnStart: "span 4"
+            if:
+              allOf:
+                - isGithubInsightsAvailable
+    roadiehq.backstage-plugin-github-pull-requests:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          importName: EntityGithubPullRequestsOverviewCard
+          config:
+            layout:
+              gridRow: "1 / span 2"
+              gridColumn: "5 / span 4"
+            if:
+              allOf:
+                - isGithubPullRequestsAvailable
+        - mountPoint: entity.page.pull-requests/cards
+          importName: EntityGithubPullRequestsContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isGithubPullRequestsAvailable
+    roadiehq.backstage-plugin-jira:
+      mountPoints:
+        - mountPoint: entity.page.issues/cards
+          importName: EntityJiraOverviewCard
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isJiraAvailable
+    roadiehq.backstage-plugin-security-insights:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          importName: EntityDependabotAlertsCard
+          config:
+            layout:
+              gridRowEnd: "span 2"
+              gridColumnStart: "span 4"
+            if:
+              allOf:
+                - isSecurityInsightsAvailable

app-config.yaml

@@ -172,4 +172,3 @@ enabled:
 
 dynamicPlugins:
   rootDirectory: dynamic-plugins-root
-  frontend: {}