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

Signed-off-by: Tomas Coufal <tcoufal@redhat.com>

.changeset/bright-crabs-crash.md

@@ -0,0 +1,39 @@
+---
+'app': major
+---
+
+Use dynamic frontend plugins across the app
+
+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)
+
+- `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.example.yaml

@@ -98,3 +98,337 @@ catalog:
     # Note: integrations.github[].apps must be correctly configured to read GitHub locations
     - type: file
       target: ../../catalog-entities/all.yaml
+
+
+dynamicPlugins:
+  frontend:
+    backstage.plugin-azure-devops:
+      mountPoints:
+        - mountPoint: entity.page.ci/cards
+          module: AzureDevopsPlugin
+          importName: EntityAzurePipelinesContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isAzureDevOpsAvailable
+        - mountPoint: entity.page.pull-requests/cards
+          module: AzureDevopsPlugin
+          importName: EntityAzurePullRequestsContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isAzureDevOpsAvailable
+    backstage.plugin-dynatrace:
+      mountPoints:
+        - mountPoint: entity.page.monitoring/cards
+          module: DynatracePlugin
+          importName: DynatraceTab
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isDynatraceAvailable
+    backstage.plugin-github-actions:
+      mountPoints:
+        - mountPoint: entity.page.ci/cards
+          module: GithubActionsPlugin
+          importName: EntityGithubActionsContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isGithubActionsAvailable
+    backstage.plugin-github-issues:
+      mountPoints:
+        - mountPoint: entity.page.issues/cards
+          module: GithubIssuesPlugin
+          importName: GithubIssuesCard
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - hasAnnotation: github.com/project-slug
+    backstage.plugin-jenkins:
+      mountPoints:
+        - mountPoint: entity.page.ci/cards
+          module: JenkinsPlugin
+          importName: EntityJenkinsContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isJenkinsAvailable
+    backstage.plugin-kubernetes:
+      mountPoints:
+        - mountPoint: entity.page.kubernetes/cards
+          module: KubernetesPlugin
+          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
+          module: LighthousePlugin
+          importName: LighthousePage
+          menuItem:
+            icon: Assessment
+            text: Lighthouse
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          module: LighthousePlugin
+          importName: EntityLastLighthouseAuditCard
+          config:
+            layout:
+              gridColumnEnd: "span 6"
+            if:
+              allOf:
+                - isLighthouseAvailable
+    backstage.plugin-pagerduty:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          module: PagerdutyPlugin
+          importName: EntityPagerDutyCard
+          config:
+            layout:
+              gridColumnEnd: "span 6"
+            if:
+              allOf:
+                - isPluginApplicableToEntity
+    backstage.plugin-sonarqube:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          module: SonarQubePlugin
+          importName: EntitySonarQubeCard
+          config:
+            layout:
+              gridColumnStart: "span 4"
+              gridRowEnd: "span 2"
+            if:
+              allOf:
+                - isSonarQubeAvailable
+    immobiliarelabs.backstage-plugin-gitlab:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          module: GitlabPlugin
+          importName: EntityGitlabMergeRequestStatsCard
+          config:
+            layout:
+              gridRowEnd: "span 2"
+              gridColumnStart: "span 4"
+            if:
+              allOf:
+                - isGitlabAvailable
+        - mountPoint: entity.page.ci/cards
+          module: GitlabPlugin
+          importName: EntityGitlabPipelinesTable
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isGitlabAvailable
+        - mountPoint: entity.page.issues/cards
+          module: GitlabPlugin
+          importName: EntityGitlabIssuesTable
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isGitlabAvailable
+        - mountPoint: entity.page.pull-requests/cards
+          module: GitlabPlugin
+          importName: EntityGitlabMergeRequestsTable
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isGitlabAvailable
+    janus-idp.backstage-plugin-jfrog-artifactory:
+      mountPoints:
+        - mountPoint: entity.page.image-registry/cards
+          module: JfrogArtifactoryPlugin
+          importName: JfrogArtifactoryPage
+          config:
+            layout:
+              gridColumn: 1 / -1
+            if:
+              anyOf:
+              - isJfrogArtifactoryAvailable
+    janus-idp.backstage-plugin-nexus-repository-manager:
+      mountPoints:
+        - mountPoint: entity.page.image-registry/cards
+          module: NexusRepositoryManagerPlugin
+          importName: NexusRepositoryManagerPage
+          config:
+            layout:
+              gridColumn: 1 / -1
+            if:
+              anyOf:
+              - isNexusRepositoryManagerAvailable
+    janus-idp.backstage-plugin-ocm:
+      dynamicRoutes:
+        - path: /ocm
+          module: OcmPlugin
+          importName: OcmPage
+          menuItem:
+            icon: Storage
+            text: Clusters
+      mountPoints:
+        - mountPoint: entity.page.overview/context
+          module: OcmPlugin
+          importName: ClusterContextProvider
+        - mountPoint: entity.page.overview/cards
+          module: OcmPlugin
+          importName: ClusterAvailableResourceCard
+          config:
+            layout:
+              gridRowStart: 1
+              gridColumnStart: "span 1"
+            if:
+              anyOf:
+              - isKind: resource
+              - isType: kubernetes-cluster
+        - mountPoint: entity.page.overview/cards
+          importName: ClusterInfoCard
+          module: OcmPlugin
+          config:
+            if:
+              allOf:
+              - isKind: resource
+              - isType: kubernetes-cluster
+    janus-idp.backstage-plugin-quay:
+      mountPoints:
+        - mountPoint: entity.page.image-registry/cards
+          module: QuayPlugin
+          importName: QuayPage
+          config:
+            layout:
+              gridColumn: 1 / -1
+            if:
+              anyOf:
+              - isQuayAvailable
+    janus-idp.backstage-plugin-tekton:
+      mountPoints:
+        - mountPoint: entity.page.ci/cards
+          module: TektonPlugin
+          importName: TektonCI
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isTektonCIAvailable
+    janus-idp.backstage-plugin-topology:
+      mountPoints:
+        - mountPoint: entity.page.topology/cards
+          module: TopologyPlugin
+          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
+          module: ArgocdPlugin
+          importName: EntityArgoCDOverviewCard
+          config:
+            layout:
+              gridColumn: "1 / span 8"
+            if:
+              allOf:
+                - isArgocdAvailable
+        - mountPoint: entity.page.cd/cards
+          module: ArgocdPlugin
+          importName: EntityArgoCDHistoryCard
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isArgocdAvailable
+    roadiehq.backstage-plugin-datadog:
+      mountPoints:
+        - mountPoint: entity.page.monitoring/cards
+          module: DatadogPlugin
+          importName: EntityDatadogContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isDatadogAvailable
+    roadiehq.backstage-plugin-github-insights:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          module: GithubInsightsPlugin
+          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
+          module: GithubPullRequestsPlugin
+          importName: EntityGithubPullRequestsOverviewCard
+          config:
+            layout:
+              gridRow: "1 / span 2"
+              gridColumn: "5 / span 4"
+            if:
+              allOf:
+                - isGithubPullRequestsAvailable
+        - mountPoint: entity.page.pull-requests/cards
+          module: GithubPullRequestsPlugin
+          importName: EntityGithubPullRequestsContent
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isGithubPullRequestsAvailable
+    roadiehq.backstage-plugin-jira:
+      mountPoints:
+        - mountPoint: entity.page.issues/cards
+          module: JiraPlugin
+          importName: EntityJiraOverviewCard
+          config:
+            layout:
+              gridColumn: "1 / -1"
+            if:
+              allOf:
+                - isJiraAvailable
+    roadiehq.backstage-plugin-security-insights:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          module: SecurityInsightsPlugin
+          importName: EntityDependabotAlertsCard
+          config:
+            layout:
+              gridRowEnd: "span 2"
+              gridColumnStart: "span 4"
+            if:
+              allOf:
+                - isSecurityInsightsAvailable

app-config.yaml

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