remove app-experiments
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
@@ -1 +0,0 @@
|
||||
module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
|
||||
@@ -1,3 +0,0 @@
|
||||
# example-app
|
||||
|
||||
This package is an example of a Backstage application.
|
||||
@@ -1,142 +0,0 @@
|
||||
{
|
||||
"name": "app-experiments",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"backstage": {
|
||||
"role": "frontend"
|
||||
},
|
||||
"bundled": true,
|
||||
"dependencies": {
|
||||
"@backstage/app-defaults": "workspace:^",
|
||||
"@backstage/catalog-model": "workspace:^",
|
||||
"@backstage/cli": "workspace:^",
|
||||
"@backstage/config": "workspace:^",
|
||||
"@backstage/core-app-api": "workspace:^",
|
||||
"@backstage/core-components": "workspace:^",
|
||||
"@backstage/core-plugin-api": "workspace:^",
|
||||
"@backstage/integration-react": "workspace:^",
|
||||
"@backstage/plugin-adr": "workspace:^",
|
||||
"@backstage/plugin-airbrake": "workspace:^",
|
||||
"@backstage/plugin-apache-airflow": "workspace:^",
|
||||
"@backstage/plugin-api-docs": "workspace:^",
|
||||
"@backstage/plugin-azure-devops": "workspace:^",
|
||||
"@backstage/plugin-azure-sites": "workspace:^",
|
||||
"@backstage/plugin-badges": "workspace:^",
|
||||
"@backstage/plugin-catalog-common": "workspace:^",
|
||||
"@backstage/plugin-catalog-graph": "workspace:^",
|
||||
"@backstage/plugin-catalog-import": "workspace:^",
|
||||
"@backstage/plugin-catalog-react": "workspace:^",
|
||||
"@backstage/plugin-catalog-unprocessed-entities": "workspace:^",
|
||||
"@backstage/plugin-circleci": "workspace:^",
|
||||
"@backstage/plugin-cloudbuild": "workspace:^",
|
||||
"@backstage/plugin-code-coverage": "workspace:^",
|
||||
"@backstage/plugin-cost-insights": "workspace:^",
|
||||
"@backstage/plugin-devtools": "workspace:^",
|
||||
"@backstage/plugin-dynatrace": "workspace:^",
|
||||
"@backstage/plugin-entity-feedback": "workspace:^",
|
||||
"@backstage/plugin-explore": "workspace:^",
|
||||
"@backstage/plugin-gcalendar": "workspace:^",
|
||||
"@backstage/plugin-gcp-projects": "workspace:^",
|
||||
"@backstage/plugin-github-actions": "workspace:^",
|
||||
"@backstage/plugin-gocd": "workspace:^",
|
||||
"@backstage/plugin-graphiql": "workspace:^",
|
||||
"@backstage/plugin-home": "workspace:^",
|
||||
"@backstage/plugin-jenkins": "workspace:^",
|
||||
"@backstage/plugin-kafka": "workspace:^",
|
||||
"@backstage/plugin-kubernetes": "workspace:^",
|
||||
"@backstage/plugin-lighthouse": "workspace:^",
|
||||
"@backstage/plugin-linguist": "workspace:^",
|
||||
"@backstage/plugin-linguist-common": "workspace:^",
|
||||
"@backstage/plugin-microsoft-calendar": "workspace:^",
|
||||
"@backstage/plugin-newrelic": "workspace:^",
|
||||
"@backstage/plugin-newrelic-dashboard": "workspace:^",
|
||||
"@backstage/plugin-octopus-deploy": "workspace:^",
|
||||
"@backstage/plugin-org": "workspace:^",
|
||||
"@backstage/plugin-pagerduty": "workspace:^",
|
||||
"@backstage/plugin-permission-react": "workspace:^",
|
||||
"@backstage/plugin-playlist": "workspace:^",
|
||||
"@backstage/plugin-puppetdb": "workspace:^",
|
||||
"@backstage/plugin-rollbar": "workspace:^",
|
||||
"@backstage/plugin-scaffolder": "workspace:^",
|
||||
"@backstage/plugin-scaffolder-react": "workspace:^",
|
||||
"@backstage/plugin-search": "workspace:^",
|
||||
"@backstage/plugin-search-common": "workspace:^",
|
||||
"@backstage/plugin-search-react": "workspace:^",
|
||||
"@backstage/plugin-sentry": "workspace:^",
|
||||
"@backstage/plugin-shortcuts": "workspace:^",
|
||||
"@backstage/plugin-stack-overflow": "workspace:^",
|
||||
"@backstage/plugin-stackstorm": "workspace:^",
|
||||
"@backstage/plugin-tech-insights": "workspace:^",
|
||||
"@backstage/plugin-tech-radar": "workspace:^",
|
||||
"@backstage/plugin-techdocs": "workspace:^",
|
||||
"@backstage/plugin-techdocs-module-addons-contrib": "workspace:^",
|
||||
"@backstage/plugin-techdocs-react": "workspace:^",
|
||||
"@backstage/plugin-todo": "workspace:^",
|
||||
"@backstage/plugin-user-settings": "workspace:^",
|
||||
"@backstage/theme": "workspace:^",
|
||||
"@internal/plugin-catalog-customized": "workspace:^",
|
||||
"@material-ui/core": "^4.12.2",
|
||||
"@material-ui/icons": "^4.9.1",
|
||||
"@material-ui/lab": "4.0.0-alpha.61",
|
||||
"@octokit/rest": "^19.0.3",
|
||||
"@oriflame/backstage-plugin-score-card": "^0.7.0",
|
||||
"@roadiehq/backstage-plugin-buildkite": "^2.0.8",
|
||||
"@roadiehq/backstage-plugin-github-insights": "^2.0.5",
|
||||
"@roadiehq/backstage-plugin-github-pull-requests": "^2.2.7",
|
||||
"@roadiehq/backstage-plugin-travis-ci": "^2.0.5",
|
||||
"history": "^5.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"prop-types": "^15.7.2",
|
||||
"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",
|
||||
"zen-observable": "^0.10.0",
|
||||
"zod": "^3.21.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@backstage/test-utils": "workspace:^",
|
||||
"@testing-library/cypress": "^9.0.0",
|
||||
"@testing-library/dom": "^8.0.0",
|
||||
"@testing-library/jest-dom": "^5.10.1",
|
||||
"@testing-library/react": "^12.1.3",
|
||||
"@testing-library/user-event": "^14.0.0",
|
||||
"@types/jquery": "^3.3.34",
|
||||
"@types/node": "^16.11.26",
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"@types/zen-observable": "^0.8.0",
|
||||
"cross-env": "^7.0.0",
|
||||
"cypress": "^10.0.0",
|
||||
"eslint-plugin-cypress": "^2.10.3",
|
||||
"start-server-and-test": "^1.10.11"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "backstage-cli package start",
|
||||
"build": "backstage-cli package build",
|
||||
"clean": "backstage-cli package clean",
|
||||
"test": "backstage-cli package test",
|
||||
"lint": "backstage-cli package lint",
|
||||
"test:e2e": "start-server-and-test start http://localhost:3000 cy:dev",
|
||||
"test:e2e:ci": "start-server-and-test start http://localhost:3000 cy:run",
|
||||
"cy:dev": "cypress open",
|
||||
"cy:run": "cypress run"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"license": "Apache-2.0"
|
||||
}
|
||||
@@ -1,445 +0,0 @@
|
||||
/*
|
||||
* Copyright 2023 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { CSSProperties, ComponentType, createContext } from 'react';
|
||||
import { z } from 'zod';
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import { Typography } from '@material-ui/core';
|
||||
|
||||
/*
|
||||
|
||||
App structure:
|
||||
- root
|
||||
- red
|
||||
- green
|
||||
- blue
|
||||
|
||||
*/
|
||||
// app.registerExtensionPoint()
|
||||
|
||||
// import { redExtensionPointRef } from 'wherever';
|
||||
|
||||
type Extension<TInstanceConfig, TSelf> = {
|
||||
factory(instanceOptions: { id: string; config: TInstanceConfig }): TSelf;
|
||||
};
|
||||
|
||||
type ExtensionOptions<
|
||||
TInstanceConfig,
|
||||
TSelf,
|
||||
TPoints extends {
|
||||
[name in string]: {
|
||||
typeRef: ExtensionPointTypeRef<unknown>;
|
||||
configSchema: z.ZodObject<any>;
|
||||
};
|
||||
},
|
||||
> = {
|
||||
mountTypeRef: ExtensionPointTypeRef<TSelf>;
|
||||
points: TPoints;
|
||||
// points: {
|
||||
// [name in keyof TPoints]: {
|
||||
// typeRef: TPoints[name]['typeRef'];
|
||||
// configSchema: z.ZodObject<any>;
|
||||
// };
|
||||
// };
|
||||
factory(instanceOptions: {
|
||||
id: string;
|
||||
config: TInstanceConfig;
|
||||
points: {
|
||||
[name in keyof TPoints]: ExtensionPointRef<TPoints[name]['typeRef']['T']>;
|
||||
};
|
||||
// points: {[name in keyof TPoints]: TPoints[name] extends ExtensionPointTypeRef<infer U> ? ExtensionPointRef<U> : never};
|
||||
}): TSelf;
|
||||
};
|
||||
|
||||
// points: {
|
||||
// top: { ref: componentExtensionPointTypeRef, configSchema: z.object({}) },
|
||||
// bottom: { ref: componentExtensionPointTypeRef, configSchema: z.object({}) },
|
||||
// },
|
||||
|
||||
type ExtensionInstanceConfig<TInstanceConfig, TSelf> = {
|
||||
id: string;
|
||||
config: TInstanceConfig;
|
||||
// what should point be for root
|
||||
mount?: string;
|
||||
extension: Extension<TInstanceConfig, TSelf>;
|
||||
};
|
||||
|
||||
type ExtensionInstance<TSelf> = {
|
||||
id: string;
|
||||
// what should point be for root
|
||||
mount?: string;
|
||||
output: TSelf;
|
||||
};
|
||||
|
||||
const BackstageAppContext = createContext<{
|
||||
extensionInstances: ExtensionInstance<unknown>[];
|
||||
}>({ extensionInstances: [] });
|
||||
|
||||
const container = {
|
||||
createExtension<
|
||||
TInstanceConfig,
|
||||
TSelf,
|
||||
TPoints extends {
|
||||
[name in string]: {
|
||||
typeRef: ExtensionPointTypeRef<unknown>;
|
||||
configSchema: z.ZodObject<any>;
|
||||
};
|
||||
},
|
||||
>(
|
||||
extensionOptions: ExtensionOptions<TInstanceConfig, TSelf, TPoints>,
|
||||
): Extension<TInstanceConfig, TSelf> {
|
||||
return {
|
||||
factory(instanceOptions) {
|
||||
return extensionOptions.factory({
|
||||
id: instanceOptions.id,
|
||||
config: instanceOptions.config,
|
||||
points: mapValues(extensionOptions.points, (point, name) =>
|
||||
createExtensionPointRef(name, point.typeRef),
|
||||
),
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
function useExtensionInstanceChildren<T>(
|
||||
id: string,
|
||||
point: ExtensionPointRef<T>,
|
||||
): T[] {
|
||||
const { extensionInstances } = React.useContext(BackstageAppContext);
|
||||
|
||||
return extensionInstances
|
||||
.filter(i => i.mount === `${id}/${point.name}`)
|
||||
.map(extensionInstance => extensionInstance.output as T);
|
||||
}
|
||||
|
||||
const ExtensionInstanceChildren = (props: {
|
||||
id: string;
|
||||
point: ExtensionPointRef<ComponentType>;
|
||||
}) => {
|
||||
const outputs = useExtensionInstanceChildren(props.id, props.point);
|
||||
|
||||
return (
|
||||
<>
|
||||
{outputs.map(Component => (
|
||||
<Component />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const coreExtensionPointTypes = {
|
||||
component: createExtensionPointTypeRef<ComponentType>(),
|
||||
styles: createExtensionPointTypeRef<CSSProperties>(),
|
||||
};
|
||||
|
||||
const Container = container.createExtension({
|
||||
points: {
|
||||
default: {
|
||||
typeRef: coreExtensionPointTypes.component,
|
||||
configSchema: z.object({}),
|
||||
},
|
||||
},
|
||||
mountTypeRef: coreExtensionPointTypes.component,
|
||||
factory:
|
||||
({ id, points }) =>
|
||||
() =>
|
||||
<ExtensionInstanceChildren id={id} point={points.default} />,
|
||||
});
|
||||
|
||||
interface ExtensionPointTypeRef<T> {
|
||||
T: T;
|
||||
$$type: 'extension-point-type';
|
||||
}
|
||||
|
||||
function createExtensionPointTypeRef<T>(): ExtensionPointTypeRef<T> {
|
||||
return { T: null as T, $$type: 'extension-point-type' };
|
||||
}
|
||||
|
||||
interface ExtensionPointRef<T> {
|
||||
name: string;
|
||||
typeRef: ExtensionPointTypeRef<T>;
|
||||
$$type: 'extension-point';
|
||||
}
|
||||
|
||||
function createExtensionPointRef<T>(
|
||||
name: string,
|
||||
typeRef: ExtensionPointTypeRef<T>,
|
||||
): ExtensionPointRef<T> {
|
||||
return { name, typeRef, $$type: 'extension-point' };
|
||||
}
|
||||
|
||||
// const splitLayoutTopExtensionPointRef = createExtensionPointRef({
|
||||
// type: componentExtensionPointTypeRef,
|
||||
// point: 'top'
|
||||
// })
|
||||
|
||||
// const splitLayoutBottomExtensionPointRef = createExtensionPointRef({
|
||||
// type: componentExtensionPointTypeRef,
|
||||
// point: 'bottom'
|
||||
// })
|
||||
|
||||
const gridItemExtensionPointTypeRef = createExtensionPointTypeRef<{
|
||||
title: string;
|
||||
Component: ComponentType;
|
||||
}>();
|
||||
|
||||
const SplitGridLayout = container.createExtension({
|
||||
points: {
|
||||
top: {
|
||||
typeRef: gridItemExtensionPointTypeRef,
|
||||
configSchema: z.object({}),
|
||||
},
|
||||
bottom: {
|
||||
typeRef: gridItemExtensionPointTypeRef,
|
||||
configSchema: z.object({}),
|
||||
},
|
||||
},
|
||||
mountTypeRef: coreExtensionPointTypes.component,
|
||||
factory:
|
||||
({ id, points }) =>
|
||||
() => {
|
||||
const topCards = useExtensionInstanceChildren(id, points.top);
|
||||
const bottomCards = useExtensionInstanceChildren(id, points.bottom);
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexFlow: 'column nowrap',
|
||||
position: 'absolute',
|
||||
top: 120,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: '1 0 0px', border: '1px solid blue' }}>
|
||||
{topCards.map(card => (
|
||||
<>
|
||||
<h4>{card.title}</h4>
|
||||
<card.Component />
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ flex: '1 0 0px', border: '1px solid orange' }}>
|
||||
{bottomCards.map(card => (
|
||||
<>
|
||||
<h4>{card.title}</h4>
|
||||
<card.Component />
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// const SnazzySplitLayout = container.replaceExtension(SplitGridLayout, {
|
||||
// factory: ({ id, points }) => {
|
||||
// ...
|
||||
// }
|
||||
// })
|
||||
|
||||
const Box = container.createExtension({
|
||||
points: {},
|
||||
mountTypeRef: gridItemExtensionPointTypeRef,
|
||||
factory: ({ config }: { config: { color: string; title?: string } }) => {
|
||||
const Component = () => (
|
||||
/**
|
||||
* If I need stuff, I have to get it from context.
|
||||
*/
|
||||
<div style={{ background: config.color, width: 100, height: 100 }}>
|
||||
{config.color}
|
||||
</div>
|
||||
);
|
||||
// registerOutput(gridItemExtensionPointTypeRef, {title: config.title ?? '<none>'})
|
||||
// registerOutput(coreExtensionPointTypes.component, Component)
|
||||
return { Component, title: config.title ?? '<none>' };
|
||||
},
|
||||
});
|
||||
|
||||
const StyledBox = container.createExtension({
|
||||
points: {
|
||||
style: {
|
||||
typeRef: coreExtensionPointTypes.styles,
|
||||
configSchema: z.object({}),
|
||||
},
|
||||
},
|
||||
mountTypeRef: gridItemExtensionPointTypeRef,
|
||||
factory: ({ id, points }) => {
|
||||
const Component = () => {
|
||||
const [style] = useExtensionInstanceChildren(id, points.style);
|
||||
|
||||
return <div style={style}>Styled box</div>;
|
||||
};
|
||||
return { Component, title: 'derp' };
|
||||
},
|
||||
});
|
||||
|
||||
const BoxStyle = container.createExtension({
|
||||
points: {},
|
||||
mountTypeRef: coreExtensionPointTypes.styles,
|
||||
factory({ config }: { config: { color: string } }) {
|
||||
return {
|
||||
borderColor: config.color,
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '5px',
|
||||
width: 120,
|
||||
height: 120,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
function createExtensionInstances(
|
||||
instanceConfigs: ExtensionInstanceConfig<unknown, unknown>[],
|
||||
): ExtensionInstance<unknown>[] {
|
||||
return instanceConfigs.map(instanceConfig => ({
|
||||
id: instanceConfig.id,
|
||||
mount: instanceConfig.mount,
|
||||
output: instanceConfig.extension.factory({
|
||||
id: instanceConfig.id,
|
||||
config: instanceConfig.config,
|
||||
}),
|
||||
}));
|
||||
}
|
||||
|
||||
const ExtensionInstanceRenderer = (props: { id: string }) => {
|
||||
const { id } = props;
|
||||
const { extensionInstances } = React.useContext(BackstageAppContext);
|
||||
|
||||
const value = extensionInstances.find(i => i.id === id);
|
||||
|
||||
if (!value) {
|
||||
throw new Error(`No extension instance found with id ${id}`);
|
||||
}
|
||||
|
||||
// TODO: Validation?
|
||||
const ComponentInstance = value.output as React.ComponentType;
|
||||
|
||||
return <ComponentInstance />;
|
||||
};
|
||||
|
||||
export function Experiment1() {
|
||||
const extensionInstances = createExtensionInstances([
|
||||
{ id: 'root', config: {}, extension: Container },
|
||||
{
|
||||
id: 'layout',
|
||||
mount: 'root/default', // Maybe can omit /default here?
|
||||
config: {},
|
||||
extension: SplitGridLayout,
|
||||
},
|
||||
{
|
||||
id: 'red',
|
||||
mount: 'layout/top',
|
||||
config: { color: 'red', title: 'RED' },
|
||||
extension: Box,
|
||||
},
|
||||
{
|
||||
id: 'green',
|
||||
mount: 'layout/top',
|
||||
config: { color: 'green', title: 'GREEN' },
|
||||
extension: Box,
|
||||
},
|
||||
{
|
||||
id: 'blue',
|
||||
mount: 'layout/bottom',
|
||||
config: { color: 'blue', title: 'BLUE' },
|
||||
extension: Box,
|
||||
},
|
||||
{
|
||||
id: 'styled-box',
|
||||
mount: 'layout/bottom',
|
||||
config: {},
|
||||
extension: StyledBox,
|
||||
},
|
||||
{
|
||||
id: 'styled-box.style',
|
||||
mount: 'styled-box/style',
|
||||
config: { color: 'purple' },
|
||||
extension: BoxStyle,
|
||||
},
|
||||
// {
|
||||
// id: 'catalogPage',
|
||||
// mount: 'core/routes',
|
||||
// config: { path: '/catalog' },
|
||||
// extension: Route,
|
||||
// },
|
||||
]);
|
||||
|
||||
return (
|
||||
<BackstageAppContext.Provider
|
||||
value={{
|
||||
// This will come from config eventually
|
||||
extensionInstances,
|
||||
}}
|
||||
>
|
||||
<h1>Experiment 1</h1>
|
||||
<Typography>
|
||||
This is an experiment to see how the app-experiments package works.
|
||||
</Typography>
|
||||
<ExtensionInstanceRenderer id="root" />
|
||||
</BackstageAppContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Continued exploration:
|
||||
*
|
||||
* - routing
|
||||
* - dynamic extension points
|
||||
* - mount point config
|
||||
* - declarative mixed with code, e.g. <SplitGridLayout.Top config={{}}>
|
||||
* - lazy loading
|
||||
* - defaults
|
||||
*/
|
||||
|
||||
/*
|
||||
// graphiql-plugin
|
||||
|
||||
|
||||
|
||||
// App.tsx
|
||||
|
||||
export default app.createRoot(<DeclaredExtensionInstance id='root'/>);
|
||||
export default app.createRoot(extensionInstanceElement('root'));
|
||||
|
||||
function extensionInstanceElement(id: string): JSX.Element {
|
||||
}
|
||||
|
||||
app:
|
||||
extensions:
|
||||
- root.sidebar:
|
||||
use: 'CustomSidebar'
|
||||
|
||||
|
||||
function CustomSidebar() {
|
||||
return (
|
||||
<Sidebar>
|
||||
{extensionInstanceElement('sidebar.items.derp')}
|
||||
</Sidebar>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
const customSidebar = createComponentExtension({
|
||||
component: CustomSidebar
|
||||
})
|
||||
|
||||
createApp({
|
||||
extensions: [customSidebar]
|
||||
})
|
||||
|
||||
*/
|
||||
@@ -1,186 +0,0 @@
|
||||
/*
|
||||
* Copyright 2023 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { ComponentType } from 'react';
|
||||
import mapValues from 'lodash/mapValues';
|
||||
|
||||
/**
|
||||
* App structure
|
||||
* - Root
|
||||
* - GroceryLayout (fruit}
|
||||
* - Apple [grocery, fruit, component]
|
||||
* - Orange [grocery, fruit, component]
|
||||
* - Metallica [band]
|
||||
*/
|
||||
|
||||
interface ExtensionDataRef<T> {
|
||||
id: string;
|
||||
T: T;
|
||||
$$type: 'extension-data';
|
||||
}
|
||||
|
||||
function createExtensionDataRef<T>(id: string) {
|
||||
return { id } as ExtensionDataRef<T>;
|
||||
}
|
||||
|
||||
const coreExtensionData = {
|
||||
reactComponent: createExtensionDataRef<ComponentType>('core.reactComponent'),
|
||||
|
||||
isGrocery: createExtensionDataRef<boolean>('isGrocery'),
|
||||
isFruit: createExtensionDataRef<boolean>('isFruit'),
|
||||
|
||||
isBand: createExtensionDataRef<boolean>('isBand'),
|
||||
title: createExtensionDataRef<string>('core.title'),
|
||||
};
|
||||
|
||||
type AnyExtensionDataMap = Record<string, ExtensionDataRef<any>>;
|
||||
|
||||
type ExtensionDataBind<TData extends AnyExtensionDataMap> = {
|
||||
[K in keyof TData]: (value: TData[K]['T']) => void;
|
||||
};
|
||||
|
||||
type ExtensionDataValue<TData extends AnyExtensionDataMap> = {
|
||||
[K in keyof TData]: TData[K]['T'];
|
||||
};
|
||||
|
||||
interface CreateExtensionOptions<
|
||||
TData extends AnyExtensionDataMap,
|
||||
TPoint extends Record<string, { extensionData: AnyExtensionDataMap }>,
|
||||
> {
|
||||
extensionData: TData;
|
||||
points?: TPoint;
|
||||
factory(options: {
|
||||
bind: ExtensionDataBind<TData>;
|
||||
config?: unknown;
|
||||
points: {
|
||||
[pointName in keyof TPoint]: ExtensionDataValue<
|
||||
TPoint[pointName]['extensionData']
|
||||
>[];
|
||||
};
|
||||
}): void;
|
||||
}
|
||||
|
||||
function createExtension<
|
||||
TData extends AnyExtensionDataMap,
|
||||
TPoint extends Record<string, { extensionData: AnyExtensionDataMap }>,
|
||||
>(options: CreateExtensionOptions<TData, TPoint>) {
|
||||
return options;
|
||||
}
|
||||
|
||||
const GroceryLayout = createExtension({
|
||||
points: {
|
||||
groceries: {
|
||||
// requiredData: [
|
||||
// coreExtensionData.reactComponent,
|
||||
// coreExtensionData.isGrocery,
|
||||
// ],
|
||||
extensionData: {
|
||||
Component: coreExtensionData.reactComponent,
|
||||
isGrocery: coreExtensionData.isGrocery,
|
||||
},
|
||||
},
|
||||
},
|
||||
extensionData: {
|
||||
component: coreExtensionData.reactComponent,
|
||||
},
|
||||
factory({ bind, points }) {
|
||||
const elements = points.groceries.map(point => <point.Component />);
|
||||
/**
|
||||
* Probably easier to evolve over time
|
||||
* const elements = points.groceries.map((point) => getExtensionData(point, coreExtensionData.reactComponent))
|
||||
**/
|
||||
const Component = () => <div>yo yo yo, here's my elements: {elements}</div>;
|
||||
bind.component(Component);
|
||||
},
|
||||
});
|
||||
|
||||
const Apple = createExtension({
|
||||
extensionData: {
|
||||
component: coreExtensionData.reactComponent,
|
||||
isGrocery: coreExtensionData.isGrocery,
|
||||
isFruit: coreExtensionData.isFruit,
|
||||
},
|
||||
factory({ bind }) {
|
||||
const Component = () => <div>apple</div>;
|
||||
bind.component(Component);
|
||||
bind.isGrocery(true);
|
||||
bind.isFruit(true);
|
||||
},
|
||||
});
|
||||
|
||||
const Metallica = createExtension({
|
||||
extensionData: {
|
||||
component: coreExtensionData.reactComponent,
|
||||
},
|
||||
factory({ bind }) {
|
||||
const Component = () => <div>HEAVY METAL YEAH</div>;
|
||||
bind.component(Component);
|
||||
},
|
||||
});
|
||||
|
||||
const Orange = createExtension({
|
||||
extensionData: {
|
||||
component: coreExtensionData.reactComponent,
|
||||
isGrocery: coreExtensionData.isGrocery,
|
||||
isFruit: coreExtensionData.isFruit,
|
||||
},
|
||||
factory({ bind }) {
|
||||
const Component = () => <div>orange</div>;
|
||||
bind.component(Component);
|
||||
bind.isGrocery(true);
|
||||
bind.isFruit(true);
|
||||
},
|
||||
});
|
||||
|
||||
function createExtensionInstance(
|
||||
options: CreateExtensionOptions<
|
||||
AnyExtensionDataMap,
|
||||
Record<string, { extensionData: AnyExtensionDataMap }>
|
||||
>,
|
||||
children: { data: Map<ExtensionDataRef<unknown>, unknown> }[],
|
||||
) {
|
||||
const extensionData = new Map<ExtensionDataRef<unknown>, unknown>();
|
||||
options.factory({
|
||||
bind: mapValues(options.extensionData, ref => {
|
||||
return (value: unknown) => extensionData.set(ref, value);
|
||||
}),
|
||||
points: mapValues(options.points, ({ extensionData: pointData }) => {
|
||||
const requiredRef = Object.values(pointData);
|
||||
const matchingChildren = children.filter(child =>
|
||||
requiredRef.every(ref => child.data.has(ref)),
|
||||
);
|
||||
return matchingChildren.map(child =>
|
||||
mapValues(pointData, ref => child.data.get(ref)),
|
||||
);
|
||||
}),
|
||||
});
|
||||
return { data: extensionData };
|
||||
}
|
||||
|
||||
export function Experiment2() {
|
||||
const apple = createExtensionInstance(Apple, []);
|
||||
const orange = createExtensionInstance(Orange, []);
|
||||
const metallica = createExtensionInstance(Metallica, []);
|
||||
const layout = createExtensionInstance(GroceryLayout, [
|
||||
apple,
|
||||
orange,
|
||||
metallica,
|
||||
]);
|
||||
const Component = layout.data.get(
|
||||
coreExtensionData.reactComponent,
|
||||
) as ComponentType;
|
||||
return <Component />;
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
/*
|
||||
* Copyright 2023 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
type Extension<TInstanceConfig, TSelf> = {
|
||||
factory(instanceOptions: { id: string; config: TInstanceConfig }): TSelf;
|
||||
};
|
||||
|
||||
type ExtensionInstance<TSelf> = {
|
||||
id: string;
|
||||
// what should point be for root
|
||||
mount?: string;
|
||||
output: TSelf;
|
||||
};
|
||||
|
||||
const ExtensionInstanceRenderer = (props: { id: string }) => {
|
||||
const { id } = props;
|
||||
const { extensionInstances } = React.useContext(BackstageAppContext);
|
||||
const value = extensionInstances.find(i => i.id === id);
|
||||
if (!value) {
|
||||
throw new Error(`No extension instance found with id ${id}`);
|
||||
}
|
||||
const ComponentInstance = value.output as React.ComponentType;
|
||||
return <ComponentInstance />;
|
||||
};
|
||||
|
||||
export function Experiment1() {
|
||||
const extensionInstances = createExtensionInstances([
|
||||
{
|
||||
id: 'layout',
|
||||
parent: 'root', // Maybe can omit /default here?
|
||||
config: {},
|
||||
use: SplitGridLayout,
|
||||
},
|
||||
{
|
||||
id: 'red',
|
||||
mount: 'layout/top',
|
||||
config: { color: 'red', title: 'RED' },
|
||||
use: Box,
|
||||
},
|
||||
{
|
||||
// green is a Box on layout/top with color=green title=GREEN
|
||||
// alias, name, id, ...
|
||||
// green is a Box extension attached to the `layout` extension instance on the `top`
|
||||
// extension point with config { ... }.
|
||||
id: 'green',
|
||||
// at: { id: 'layout', point: 'top' },
|
||||
at: 'layout/top',
|
||||
extension: '@backstage/plugin-catalog-react#Box',
|
||||
config: { color: 'green', title: 'GREEN' },
|
||||
},
|
||||
{
|
||||
id: 'blue',
|
||||
at: 'layout/bottom',
|
||||
extension: '@backstage/plugin-catalog-react#Box',
|
||||
config: { color: 'blue', title: 'BLUE' },
|
||||
},
|
||||
|
||||
{
|
||||
id: 'styled-box',
|
||||
parent: 'layout/bottom',
|
||||
config: { title: 'STYLED' },
|
||||
extension: StyledBox,
|
||||
},
|
||||
{
|
||||
id: 'styled-box.style',
|
||||
parent: 'styled-box/style',
|
||||
config: { color: 'purple' },
|
||||
extension: BoxStyle,
|
||||
},
|
||||
|
||||
{
|
||||
id: 'scaffolder.page',
|
||||
bind: 'core.router/routes',
|
||||
attach: 'core.router/routes',
|
||||
target: 'core.router/routes',
|
||||
connect: 'core.router/routes',
|
||||
on: 'core.router/routes',
|
||||
at: 'core.router/routes',
|
||||
edge: 'core.router/routes',
|
||||
config: { path: '/create' },
|
||||
extension: ScaffolderPage,
|
||||
},
|
||||
{
|
||||
id: 'scaffolder.fieldExtensions.derp',
|
||||
attach: 'scaffolder.page/fieldExtension',
|
||||
config: { color: 'purple' },
|
||||
extension: DerpScaffolderFieldExtension,
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
interface ExtensionDataRef<T> {
|
||||
id: string;
|
||||
T: T;
|
||||
$$type: 'extension-data';
|
||||
}
|
||||
|
||||
function createExtensionDataRef<T>(id: string) {
|
||||
return { id } as ExtensionDataRef<T>;
|
||||
}
|
||||
|
||||
const coreExtensionData = {
|
||||
reactComponent: createExtensionDataRef<ComponentType>('core.reactComponent'),
|
||||
isGrocery: createExtensionDataRef<boolean>('isGrocery'),
|
||||
title: createExtensionDataRef<string>('core.title'),
|
||||
};
|
||||
|
||||
const groceryExtensionDataCollection = () => ({
|
||||
Component: coreExtensionData.reactComponent,
|
||||
isGrocery: coreExtensionData.isGrocery,
|
||||
});
|
||||
|
||||
const groceriesExtensionPoint = createExtensionPoint({
|
||||
extensionData: groceryExtensionDataCollection(),
|
||||
});
|
||||
|
||||
const GroceryLayout = createExtension({
|
||||
points: {
|
||||
groceries: groceriesExtensionPoint,
|
||||
// groceries: {
|
||||
// extensionData: groceryExtensionDataCollection(),
|
||||
// },
|
||||
},
|
||||
extensionData: {
|
||||
component: coreExtensionData.reactComponent,
|
||||
},
|
||||
factory({ bind, points }) {
|
||||
const elements = points.groceries.map(point => <point.Component />);
|
||||
const Component = () => <div>yo yo yo, here's my elements: {elements}</div>;
|
||||
bind.component(Component);
|
||||
},
|
||||
});
|
||||
|
||||
// // plugin-*-react
|
||||
// const GroceryLayoutExtensionDefinition = defineExtension({
|
||||
// input: {
|
||||
// groceries: {
|
||||
// component: coreExtensionData.reactComponent,
|
||||
// isGrocery: coreExtensionData.isGrocery,
|
||||
// }
|
||||
// },
|
||||
// output: {
|
||||
// component: coreExtensionData.reactComponent,
|
||||
// },
|
||||
// });
|
||||
|
||||
// // plugin-*
|
||||
// const GroceryLayoutExtension = createExtension(GroceryLayoutExtension, ({ bind, points }) => {
|
||||
// ...
|
||||
// });
|
||||
|
||||
const GroceryLayout = createExtension({
|
||||
inputs: {
|
||||
groceries: {
|
||||
Component: coreExtensionData.reactComponent,
|
||||
isGrocery: coreExtensionData.isGrocery,
|
||||
},
|
||||
},
|
||||
output: {
|
||||
component: coreExtensionData.reactComponent,
|
||||
},
|
||||
factory({ output, input }) {
|
||||
const elements = input.groceries.map(point => <point.Component />);
|
||||
const Component = () => <div>yo yo yo, here's my elements: {elements}</div>;
|
||||
output.component.set({ component: Component });
|
||||
},
|
||||
});
|
||||
|
||||
const createGroceryExtension = createExtensionFactory(({ component }) => ({
|
||||
extensionData: groceryExtensionDataCollection(),
|
||||
factory({ bind }) {
|
||||
bind.component(component);
|
||||
bind.isGrocery(true);
|
||||
bind.isFruit(true);
|
||||
},
|
||||
}));
|
||||
|
||||
const Apple = createGroceryExtension({
|
||||
component: () => <div>apple</div>,
|
||||
});
|
||||
@@ -1,22 +0,0 @@
|
||||
/*
|
||||
* Copyright 2020 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import '@backstage/cli/asset-types';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Experiment2 } from './Experiment2';
|
||||
|
||||
ReactDOM.render(<Experiment2 />, document.getElementById('root'));
|
||||
@@ -1,21 +0,0 @@
|
||||
/*
|
||||
* Copyright 2020 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
@@ -19287,115 +19287,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"app-experiments@workspace:packages/app-experiments":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "app-experiments@workspace:packages/app-experiments"
|
||||
dependencies:
|
||||
"@backstage/app-defaults": "workspace:^"
|
||||
"@backstage/catalog-model": "workspace:^"
|
||||
"@backstage/cli": "workspace:^"
|
||||
"@backstage/config": "workspace:^"
|
||||
"@backstage/core-app-api": "workspace:^"
|
||||
"@backstage/core-components": "workspace:^"
|
||||
"@backstage/core-plugin-api": "workspace:^"
|
||||
"@backstage/integration-react": "workspace:^"
|
||||
"@backstage/plugin-adr": "workspace:^"
|
||||
"@backstage/plugin-airbrake": "workspace:^"
|
||||
"@backstage/plugin-apache-airflow": "workspace:^"
|
||||
"@backstage/plugin-api-docs": "workspace:^"
|
||||
"@backstage/plugin-azure-devops": "workspace:^"
|
||||
"@backstage/plugin-azure-sites": "workspace:^"
|
||||
"@backstage/plugin-badges": "workspace:^"
|
||||
"@backstage/plugin-catalog-common": "workspace:^"
|
||||
"@backstage/plugin-catalog-graph": "workspace:^"
|
||||
"@backstage/plugin-catalog-import": "workspace:^"
|
||||
"@backstage/plugin-catalog-react": "workspace:^"
|
||||
"@backstage/plugin-catalog-unprocessed-entities": "workspace:^"
|
||||
"@backstage/plugin-circleci": "workspace:^"
|
||||
"@backstage/plugin-cloudbuild": "workspace:^"
|
||||
"@backstage/plugin-code-coverage": "workspace:^"
|
||||
"@backstage/plugin-cost-insights": "workspace:^"
|
||||
"@backstage/plugin-devtools": "workspace:^"
|
||||
"@backstage/plugin-dynatrace": "workspace:^"
|
||||
"@backstage/plugin-entity-feedback": "workspace:^"
|
||||
"@backstage/plugin-explore": "workspace:^"
|
||||
"@backstage/plugin-gcalendar": "workspace:^"
|
||||
"@backstage/plugin-gcp-projects": "workspace:^"
|
||||
"@backstage/plugin-github-actions": "workspace:^"
|
||||
"@backstage/plugin-gocd": "workspace:^"
|
||||
"@backstage/plugin-graphiql": "workspace:^"
|
||||
"@backstage/plugin-home": "workspace:^"
|
||||
"@backstage/plugin-jenkins": "workspace:^"
|
||||
"@backstage/plugin-kafka": "workspace:^"
|
||||
"@backstage/plugin-kubernetes": "workspace:^"
|
||||
"@backstage/plugin-lighthouse": "workspace:^"
|
||||
"@backstage/plugin-linguist": "workspace:^"
|
||||
"@backstage/plugin-linguist-common": "workspace:^"
|
||||
"@backstage/plugin-microsoft-calendar": "workspace:^"
|
||||
"@backstage/plugin-newrelic": "workspace:^"
|
||||
"@backstage/plugin-newrelic-dashboard": "workspace:^"
|
||||
"@backstage/plugin-octopus-deploy": "workspace:^"
|
||||
"@backstage/plugin-org": "workspace:^"
|
||||
"@backstage/plugin-pagerduty": "workspace:^"
|
||||
"@backstage/plugin-permission-react": "workspace:^"
|
||||
"@backstage/plugin-playlist": "workspace:^"
|
||||
"@backstage/plugin-puppetdb": "workspace:^"
|
||||
"@backstage/plugin-rollbar": "workspace:^"
|
||||
"@backstage/plugin-scaffolder": "workspace:^"
|
||||
"@backstage/plugin-scaffolder-react": "workspace:^"
|
||||
"@backstage/plugin-search": "workspace:^"
|
||||
"@backstage/plugin-search-common": "workspace:^"
|
||||
"@backstage/plugin-search-react": "workspace:^"
|
||||
"@backstage/plugin-sentry": "workspace:^"
|
||||
"@backstage/plugin-shortcuts": "workspace:^"
|
||||
"@backstage/plugin-stack-overflow": "workspace:^"
|
||||
"@backstage/plugin-stackstorm": "workspace:^"
|
||||
"@backstage/plugin-tech-insights": "workspace:^"
|
||||
"@backstage/plugin-tech-radar": "workspace:^"
|
||||
"@backstage/plugin-techdocs": "workspace:^"
|
||||
"@backstage/plugin-techdocs-module-addons-contrib": "workspace:^"
|
||||
"@backstage/plugin-techdocs-react": "workspace:^"
|
||||
"@backstage/plugin-todo": "workspace:^"
|
||||
"@backstage/plugin-user-settings": "workspace:^"
|
||||
"@backstage/test-utils": "workspace:^"
|
||||
"@backstage/theme": "workspace:^"
|
||||
"@internal/plugin-catalog-customized": "workspace:^"
|
||||
"@material-ui/core": ^4.12.2
|
||||
"@material-ui/icons": ^4.9.1
|
||||
"@material-ui/lab": 4.0.0-alpha.61
|
||||
"@octokit/rest": ^19.0.3
|
||||
"@oriflame/backstage-plugin-score-card": ^0.7.0
|
||||
"@roadiehq/backstage-plugin-buildkite": ^2.0.8
|
||||
"@roadiehq/backstage-plugin-github-insights": ^2.0.5
|
||||
"@roadiehq/backstage-plugin-github-pull-requests": ^2.2.7
|
||||
"@roadiehq/backstage-plugin-travis-ci": ^2.0.5
|
||||
"@testing-library/cypress": ^9.0.0
|
||||
"@testing-library/dom": ^8.0.0
|
||||
"@testing-library/jest-dom": ^5.10.1
|
||||
"@testing-library/react": ^12.1.3
|
||||
"@testing-library/user-event": ^14.0.0
|
||||
"@types/jquery": ^3.3.34
|
||||
"@types/node": ^16.11.26
|
||||
"@types/react": "*"
|
||||
"@types/react-dom": "*"
|
||||
"@types/zen-observable": ^0.8.0
|
||||
cross-env: ^7.0.0
|
||||
cypress: ^10.0.0
|
||||
eslint-plugin-cypress: ^2.10.3
|
||||
history: ^5.0.0
|
||||
lodash: ^4.17.21
|
||||
prop-types: ^15.7.2
|
||||
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
|
||||
start-server-and-test: ^1.10.11
|
||||
zen-observable: ^0.10.0
|
||||
zod: ^3.21.4
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"append-field@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "append-field@npm:1.0.0"
|
||||
|
||||
Reference in New Issue
Block a user