add app-experiments with initial implementation
Co-authored-by: Fredrik Adelöw <freben@gmail.com> Co-authored-by: Johan Haals <johan.haals@gmail.com> Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com> Co-authored-by: MT Lewis <mtlewis@users.noreply.github.com> Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
@@ -0,0 +1 @@
|
||||
module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
|
||||
@@ -0,0 +1,3 @@
|
||||
# example-app
|
||||
|
||||
This package is an example of a Backstage application.
|
||||
@@ -0,0 +1,140 @@
|
||||
{
|
||||
"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",
|
||||
"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"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
/*
|
||||
* 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, createContext, useMemo } from 'react';
|
||||
|
||||
/*
|
||||
|
||||
App structure:
|
||||
- root
|
||||
- red
|
||||
- green
|
||||
- blue
|
||||
|
||||
*/
|
||||
// app.registerExtensionPoint()
|
||||
|
||||
// import { redExtensionPointRef } from 'wherever';
|
||||
|
||||
type Extension<TInstanceConfig extends unknown> = {
|
||||
factory(instanceOptions: { config: TInstanceConfig }): ComponentType;
|
||||
};
|
||||
|
||||
type ExtensionInstance<TInstanceConfig extends unknown> = {
|
||||
id: string;
|
||||
config: TInstanceConfig;
|
||||
extension: Extension<TInstanceConfig>;
|
||||
};
|
||||
|
||||
const BackstageAppContext = createContext<{
|
||||
extensionInstances: ExtensionInstance<unknown>[];
|
||||
}>({ extensionInstances: [] });
|
||||
|
||||
const container = {
|
||||
createExtension<TInstanceConfig extends unknown>(extensionOptions: {
|
||||
render: (config: TInstanceConfig) => JSX.Element;
|
||||
}): Extension<TInstanceConfig> {
|
||||
return {
|
||||
factory(instanceOptions: { config: TInstanceConfig }) {
|
||||
return () => extensionOptions.render(instanceOptions.config);
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
const Box = container.createExtension({
|
||||
render: (config: { color: string }) => {
|
||||
return (
|
||||
<div style={{ background: config.color, width: 100, height: 100 }}>
|
||||
{config.color}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const ExtensionInstanceDerp = (props: { id: string }) => {
|
||||
const { id } = props;
|
||||
const { extensionInstances } = React.useContext(BackstageAppContext);
|
||||
|
||||
const instance = extensionInstances.find(i => i.id === id);
|
||||
|
||||
if (!instance) {
|
||||
throw new Error(`No extension instance found with id ${id}`);
|
||||
}
|
||||
|
||||
const Component = useMemo(
|
||||
() => instance.extension.factory({ config: instance.config }),
|
||||
[instance],
|
||||
);
|
||||
return <Component />;
|
||||
};
|
||||
|
||||
export function Experiment1() {
|
||||
// const element = useExtension("red");
|
||||
|
||||
return (
|
||||
<BackstageAppContext.Provider
|
||||
value={{
|
||||
// This will come from config eventually
|
||||
extensionInstances: [
|
||||
// { id: 'root' },
|
||||
{ id: 'red', config: { color: 'red' }, extension: Box },
|
||||
{ id: 'green', config: { color: 'green' }, extension: Box },
|
||||
{ id: 'blue', config: { color: 'blue' }, extension: Box },
|
||||
],
|
||||
}}
|
||||
>
|
||||
<h1>Experiment 1</h1>
|
||||
<p>This is an experiment to see how the app-experiments package works.</p>
|
||||
{/* extension point */}
|
||||
<ExtensionInstanceDerp id="red" />
|
||||
<ExtensionInstanceDerp id="green" />
|
||||
<ExtensionInstanceDerp id="blue" />
|
||||
</BackstageAppContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
// 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]
|
||||
})
|
||||
|
||||
*/
|
||||
@@ -0,0 +1,22 @@
|
||||
/*
|
||||
* 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 { Experiment1 } from './Experiment1';
|
||||
|
||||
ReactDOM.render(<Experiment1 />, document.getElementById('root'));
|
||||
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
* 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';
|
||||
@@ -19259,6 +19259,113 @@ __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
|
||||
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
|
||||
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