Add PlatformScript Plugin

catalog-info.yaml

@@ -10,12 +10,17 @@ metadata:
     "humanitec.com/orgId": "the-frontside-software-inc"
     "humanitec.com/appId": "backstage"
     # backstage.io/techdocs-ref: dir:.
+  links:
+    - url: https://dashboard.example.com
+      title: My Dashboard
+      icon: dashboard
 spec:
   type: website
   owner: [email protected]
   lifecycle: production
   providesApis:
     - backstage-graphql-api
+#  overviewContentLayout:
 ---
 apiVersion: backstage.io/v1alpha1
 kind: API

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "engines": {
-    "node": "14 || 16"
+    "node": ">=16"
   },
   "scripts": {
     "dev": "concurrently \"yarn start\" \"yarn start-backend\"",
@@ -61,6 +61,6 @@
     ]
   },
   "volta": {
-    "node": "14.20.0"
+    "node": "16.18.1"
   }
 }

packages/app/.eslintrc.js

@@ -1 +1,6 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
+  rules: {
+    'func-names': 'off',
+    'consistent-return': 'off'
+  }
+});

packages/app/package.json

@@ -27,20 +27,25 @@
     "@backstage/plugin-search-react": "^1.2.0",
     "@backstage/plugin-tech-radar": "^0.5.17",
     "@backstage/plugin-techdocs": "^1.3.3",
-    "@backstage/plugin-techdocs-react": "^1.0.5",
     "@backstage/plugin-techdocs-module-addons-contrib": "^1.0.5",
+    "@backstage/plugin-techdocs-react": "^1.0.5",
     "@backstage/plugin-user-settings": "^0.5.0",
     "@backstage/theme": "^0.2.16",
     "@frontside/backstage-plugin-effection-inspector": "^0.1.3",
     "@frontside/backstage-plugin-humanitec": "^0.3.2",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
+    "@monaco-editor/react": "4.4.5",
+    "assert-ts": "^0.3.4",
+    "effection": "^2.0.6",
     "history": "^5.0.0",
+    "platformscript": "1.0.0-alpha.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
-    "react-use": "^17.2.4"
+    "react-use": "^17.2.4",
+    "yaml": "^2.1.3"
   },
   "devDependencies": {
     "@backstage/test-utils": "^1.2.1",
@@ -80,5 +85,8 @@
   },
   "files": [
     "dist"
-  ]
+  ],
+  "volta": {
+    "extend": "../../package.json"
+  }
 }

packages/app/src/App.tsx

@@ -25,6 +25,7 @@ import { UserSettingsPage } from '@backstage/plugin-user-settings';
 import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';
 import { searchPage } from './components/search/SearchPage';
+import { PlatformScriptEditor } from './components/PlatformScriptPage';
 import { Root } from './components/Root';
 
 import { AlertDisplay, OAuthRequestDialog } from '@backstage/core-components';
@@ -78,6 +79,7 @@ const routes = (
       </TechDocsAddons>
     </Route>
     <Route path="/create" element={<ScaffolderPage />} />
+    <Route path="/platformscript" element={<PlatformScriptEditor/> } />
     <Route path="/api-docs" element={<ApiExplorerPage />} />
     <Route
       path="/tech-radar"

packages/app/src/components/PlatformScriptPage.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import * as ps from 'platformscript';
+import { MonacoEditor, YAMLEditor } from './yaml-editor/YamlEditor';
+import { useAsync } from 'react-use';
+import type { PSValue } from 'platformscript';
+import { globals } from './globals';
+
+export function usePlatformScript(yaml: string) {
+  const platformscript = useMemo(() => {
+    return ps.createPlatformScript(globals);
+  }, []);
+
+  const result = useAsync(async (): Promise<PSValue | undefined> => {
+    const program = ps.parse(yaml as string);
+
+    const mod = await platformscript.eval(program);
+
+  return mod.value;
+  }, [yaml]);
+
+  return result;
+}
+
+interface PlatformScriptOptions {
+  yaml: string;
+  initialYaml: string
+  onChange: (value: string) => void 
+}
+
+export function PlatformScriptEditor({ yaml, initialYaml, onChange }: PlatformScriptOptions) {
+  const editorRef = useRef<MonacoEditor>(null);
+
+
+  const handleEditorMount = useCallback((editor: MonacoEditor) => {
+    editorRef.current = editor;
+  }, []);
+
+  const result = usePlatformScript(yaml);
+
+  return (
+    <>
+      <div>
+        {result.loading && (<h2>...loading</h2>)}
+        <YAMLEditor
+          defaultValue={initialYaml}
+          onMount={handleEditorMount}
+          onChange={(value = '"false"') => onChange(value)}
+          value={yaml}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -29,7 +29,6 @@ import {
   EntityDependsOnResourcesCard,
   EntityHasComponentsCard,
   EntityHasResourcesCard,
-  EntityHasSubcomponentsCard,
   EntityHasSystemsCard,
   EntityLayout,
   EntityLinksCard,
@@ -54,20 +53,21 @@ import {
 } from '@backstage/plugin-org';
 import { EntityTechdocsContent } from '@backstage/plugin-techdocs';
 import { EmptyState } from '@backstage/core-components';
-import { HumanitecCardComponent } from '@frontside/backstage-plugin-humanitec';
 
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+import { OverviewContent } from './OverviewContent';
+import { WebsiteLayout } from './WebsiteLayout';
 
-const techdocsContent = (
+export const techdocsContent = (
   <EntityTechdocsContent>
     <TechDocsAddons>
       <ReportIssue />
     </TechDocsAddons>
   </EntityTechdocsContent>
 );
 
-const cicdContent = (
+export const cicdContent = (
   // This is an example of how you can implement your company's logic in entity page.
   // You can for example enforce that all components of type 'service' should use GitHubActions
   <EntitySwitch>
@@ -94,7 +94,7 @@ const cicdContent = (
   </EntitySwitch>
 );
 
-const entityWarningContent = (
+export const entityWarningContent = (
   <>
     <EntitySwitch>
       <EntitySwitch.Case if={isOrphan}>
@@ -114,28 +114,10 @@ const entityWarningContent = (
   </>
 );
 
-const overviewContent = (
-  <Grid container spacing={3} alignItems="stretch">
-    {entityWarningContent}
-    <Grid item md={6}>
-      <EntityAboutCard variant="gridItem" />
-    </Grid>
-    <Grid item md={6}>
-      <HumanitecCardComponent />
-    </Grid>
-    <Grid item md={4} xs={12}>
-      <EntityLinksCard />
-    </Grid>
-    <Grid item md={8} xs={12}>
-      <EntityHasSubcomponentsCard variant="gridItem" />
-    </Grid>
-  </Grid>
-);
-
 const serviceEntityPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">
-      {overviewContent}
+      <OverviewContent />
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/ci-cd" title="CI/CD">
@@ -170,33 +152,6 @@ const serviceEntityPage = (
   </EntityLayout>
 );
 
-const websiteEntityPage = (
-  <EntityLayout>
-    <EntityLayout.Route path="/" title="Overview">
-      {overviewContent}
-    </EntityLayout.Route>
-
-    <EntityLayout.Route path="/ci-cd" title="CI/CD">
-      {cicdContent}
-    </EntityLayout.Route>
-
-    <EntityLayout.Route path="/dependencies" title="Dependencies">
-      <Grid container spacing={3} alignItems="stretch">
-        <Grid item md={6}>
-          <EntityDependsOnComponentsCard variant="gridItem" />
-        </Grid>
-        <Grid item md={6}>
-          <EntityDependsOnResourcesCard variant="gridItem" />
-        </Grid>
-      </Grid>
-    </EntityLayout.Route>
-
-    <EntityLayout.Route path="/docs" title="Docs">
-      {techdocsContent}
-    </EntityLayout.Route>
-  </EntityLayout>
-);
-
 /**
  * NOTE: This page is designed to work on small screens such as mobile devices.
  * This is based on Material UI Grid. If breakpoints are used, each grid item must set the `xs` prop to a column size or to `true`,
@@ -207,7 +162,7 @@ const websiteEntityPage = (
 const defaultEntityPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">
-      {overviewContent}
+      <OverviewContent />
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
@@ -223,7 +178,7 @@ const componentPage = (
     </EntitySwitch.Case>
 
     <EntitySwitch.Case if={isComponentType('website')}>
-      {websiteEntityPage}
+      <WebsiteLayout />
     </EntitySwitch.Case>
 
     <EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case>

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

@@ -0,0 +1,70 @@
+import React, { useMemo, useState } from 'react';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { PSOverviewContent } from './PSOverviewContent';
+import { stringify } from 'yaml';
+import { Grid } from '@material-ui/core';
+import { PlatformScriptEditor } from '../PlatformScriptPage';
+
+const defaultOverviewContent = `
+$Grid:
+  container: true
+  spacing: 3
+  alignItems: stretch
+children:
+  - $Grid:
+      item: true
+      md: 6
+    children:
+      - $EntityAboutCard:
+          variant: gridItem
+  - $Grid:
+      item: true
+      md: 6
+    children: 
+      $HumanitecCardComponent: true
+  - $Grid:
+      item: true
+      md: 4
+      xs: 12
+    children:
+      $EntityLinksCard: true
+  - $Grid:
+      item: true
+      md: 8
+      xs: 12
+    children:
+      $EntityHasSubcomponentsCard:
+        variant: gridItem  
+`
+
+export function OverviewContent({ isEditing }: { isEditing?: boolean }) {
+  const { entity } = useEntity();
+
+  const overviewContentLayout = useMemo(() => {
+    if (entity?.spec?.overviewContentLayout) {
+      return stringify(entity?.spec?.overviewContentLayout);
+    }
+    return defaultOverviewContent;
+  }, [entity?.spec?.overviewContentLayout]);
+
+  const [yaml, setYaml] = useState<string>(overviewContentLayout);
+
+  if (isEditing) {
+    return (
+      <Grid container spacing={3}>
+        <Grid item md={8}>
+          <PSOverviewContent yaml={yaml} />
+        </Grid>
+        <Grid item md={4}>
+          <PlatformScriptEditor 
+            yaml={yaml} 
+            onChange={setYaml} 
+            initialYaml={overviewContentLayout} 
+          />
+        </Grid>
+      </Grid>
+    )
+  }
+
+  return <PSOverviewContent yaml={overviewContentLayout} />;
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { usePlatformScript } from '../PlatformScriptPage';
+
+export function PSOverviewContent({ yaml }: { yaml: string; }) {
+  const result = usePlatformScript(yaml);
+
+  if (result.loading) {
+    return <>Loading...</>;
+  }
+
+  if (result.error) {
+    return <>{result.error.message}</>;
+  }
+
+  return <>{result.value}</>;
+}