Allow explicit package list & add UI

Co-authored-by: Vincenzo Scamporlino <vinzscam@users.noreply.github.com>
Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/cli/src/lib/bundler/config.ts

@@ -131,7 +131,7 @@ export async function createConfig(
 
   if (extraPackages.length > 0) {
     const requirePackageScript = extraPackages
-      ?.map(pkg => `require('${pkg}')`)
+      ?.map(pkg => `{name: '${pkg}', module: require('${pkg}')}`)
       .join(',');
 
     plugins.push(

packages/cli/src/lib/bundler/server.ts

@@ -42,7 +42,7 @@ export async function serveBundle(options: ServeOptions) {
 
   // TODO: proper
   // Assumption for config string based on https://github.com/backstage/backstage/issues/18372 ^
-  const packageDetectionMode = options.fullConfig.getOptionalString(
+  const packageDetectionMode = options.fullConfig.getOptional(
     'app.experimental.packages',
   );
   const extraPackages = [];
@@ -60,6 +60,23 @@ export async function serveBundle(options: ServeOptions) {
         extraPackages.push(depName);
       }
     }
+  } else {
+    const packagesList = Array.isArray(packageDetectionMode)
+      ? packageDetectionMode
+      : [];
+    for (const depName of packagesList ?? []) {
+      const depPackageJson: BackstagePackageJson = require(require.resolve(
+        `${depName}/package.json`,
+        { paths: [paths.targetPath] },
+      ));
+      if (
+        ['frontend-plugin', 'frontend-plugin-module'].includes(
+          depPackageJson.backstage?.role || '',
+        )
+      ) {
+        extraPackages.push(depName);
+      }
+    }
   }
   if (options.verifyVersions) {
     const lockfile = await Lockfile.load(

plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx

@@ -37,7 +37,12 @@ import MemoryIcon from '@material-ui/icons/Memory';
 import DeveloperBoardIcon from '@material-ui/icons/DeveloperBoard';
 import { BackstageLogoIcon } from './BackstageLogoIcon';
 import FileCopyIcon from '@material-ui/icons/FileCopy';
-import { DevToolsInfo } from '@backstage/plugin-devtools-common';
+import {
+  DevToolsInfo,
+  PackageDependency,
+} from '@backstage/plugin-devtools-common';
+
+const PACKAGES_GLOBAL = '__backstage_detected_packages__';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -74,6 +79,21 @@ export const InfoContent = () => {
   const classes = useStyles();
   const { about, loading, error } = useInfo();
 
+  const availablePlugins: PackageDependency[] = (window as any)[PACKAGES_GLOBAL]
+    ? (
+        (window as any)[PACKAGES_GLOBAL].modules as Array<Record<string, any>>
+      ).map(({ name, module }) => {
+        const pluginImpl: any = Object.values(module).find(
+          (v: any) => !!v?.getId,
+        );
+
+        return {
+          name,
+          versions: (pluginImpl?.getId() as string) || '',
+        };
+      })
+    : [];
+
   if (loading) {
     return <Progress />;
   } else if (error) {
@@ -144,7 +164,18 @@ export const InfoContent = () => {
           </ListItem>
         </List>
       </Paper>
-      <InfoDependenciesTable infoDependencies={about?.dependencies} />
+      <Paper className={classes.paperStyle}>
+        <InfoDependenciesTable
+          title="Package Dependencies"
+          infoDependencies={about?.dependencies}
+        />
+      </Paper>
+      <Paper className={classes.paperStyle}>
+        <InfoDependenciesTable
+          title="Available Plugins"
+          infoDependencies={availablePlugins}
+        />
+      </Paper>
     </Box>
   );
 };

plugins/devtools/src/components/Content/InfoContent/InfoDependenciesTable.tsx

@@ -35,12 +35,14 @@ const columns: TableColumn[] = [
 
 export const InfoDependenciesTable = ({
   infoDependencies,
+  title,
 }: {
+  title: string;
   infoDependencies: PackageDependency[] | undefined;
 }) => {
   return (
     <Table
-      title="Package Dependencies"
+      title={title}
       options={{
         paging: true,
         pageSize: 15,