paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 34 Packages Projects Releases Wiki Activity

Merge pull request #5993 from backstage/mob/feature-flag-component

Browse Source 
feat: Feature Flag Component + Simplify the traversal for composability
This commit is contained in:
Ben Lambert
2021-06-17 15:20:05 +02:00
committed by GitHub
parent ffe7759de8 05a9bb84d9
commit 87e316b78d
27 changed files with 974 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/scaffolder/package.json
+4 -3
View File
@@ -33,11 +33,12 @@
"@backstage/catalog-client": "^0.3.13",
"@backstage/catalog-model": "^0.8.2",
"@backstage/config": "^0.1.5",
"@backstage/errors": "^0.1.1",
"@backstage/core": "^0.7.12",
"@backstage/integration": "^0.5.6",
"@backstage/integration-react": "^0.1.3",
"@backstage/plugin-catalog-react": "^0.2.2",
"@backstage/core-plugin-api": "^0.1.2",
"@backstage/errors": "^0.1.1",
"@backstage/theme": "^0.2.8",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
@@ -46,10 +47,10 @@
"@rjsf/material-ui": "^2.4.0",
"@types/react": "^16.9",
"classnames": "^2.2.6",
"json-schema": "^0.3.0",
"git-url-parse": "^11.4.4",
"humanize-duration": "^3.25.1",
"immer": "^9.0.1",
"json-schema": "^0.3.0",
"luxon": "^1.25.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
@@ -66,9 +67,9 @@
"@backstage/test-utils": "^0.1.13",
"@testing-library/jest-dom": "^5.10.1",
"@testing-library/react": "^11.2.5",
"@testing-library/react-hooks": "^3.3.0",
"@testing-library/user-event": "^13.1.8",
"@types/humanize-duration": "^3.18.1",
"@testing-library/react-hooks": "^3.3.0",
"@types/jest": "^26.0.7",
"@types/node": "^14.14.32",
"cross-fetch": "^3.0.6",
plugins/scaffolder/src/components/Router.tsx
+14 -11
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { useMemo } from 'react';
import React from 'react';
import { Routes, Route, useOutlet } from 'react-router';
import { ScaffolderPage } from './ScaffolderPage';
import { TemplatePage } from './TemplatePage';
@@ -27,21 +27,24 @@ import {
FIELD_EXTENSION_KEY,
DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS,
} from '../extensions';
import { collectComponentData, collectChildren } from '../extensions/helpers';
import { useElementFilter } from '@backstage/core-plugin-api';
export const Router = () => {
const outlet = useOutlet();
const fieldExtensions = useMemo(() => {
const registeredExtensions = collectComponentData<FieldExtensionOptions>(
collectChildren(outlet, FIELD_EXTENSION_WRAPPER_KEY).flat(),
FIELD_EXTENSION_KEY,
);
const foundExtensions = useElementFilter(outlet, elements =>
elements
.selectByComponentData({
key: FIELD_EXTENSION_WRAPPER_KEY,
})
.findComponentData<FieldExtensionOptions>({
key: FIELD_EXTENSION_KEY,
}),
);
return registeredExtensions.length
? registeredExtensions
: DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS;
}, [outlet]);
const fieldExtensions = foundExtensions.length
? foundExtensions
: DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS;
return (
<Routes>
plugins/scaffolder/src/extensions/helpers.test.tsx
-107
View File
@@ -1,107 +0,0 @@
/*
* Copyright 2021 Spotify AB
*
* 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 from 'react';
import { collectComponentData, collectChildren } from './helpers';
import { attachComponentData } from '@backstage/core';
describe('Extension Helpers', () => {
const createElementWithComponentData = ({
type,
data,
}: {
type: string;
data: any;
}) => {
const element: React.ComponentType = () => null;
attachComponentData(element, type, data);
return element;
};
describe('collectChildren', () => {
it('should return the children of the component which has the correct componentData flag', () => {
const SearchElement = createElementWithComponentData({
type: 'find.me',
data: {},
});
const DontCareAboutme = createElementWithComponentData({
type: 'dont.find.me',
data: {},
});
const child1 = (
<div>
<b>hello</b>
</div>
);
const child2 = (
<div>
<p>Hello2</p>
</div>
);
const testCase = (
<div>
<SearchElement>
{child1}
{child1}
</SearchElement>
<SearchElement>{child2}</SearchElement>
<DontCareAboutme>
<p>Hello!</p>
<SearchElement>{child1}</SearchElement>
</DontCareAboutme>
</div>
);
const children = collectChildren(testCase, 'find.me');
expect(children).toEqual([[child1, child1], child2, child1]);
});
});
describe('collectComponentData', () => {
it('should return the componentData for particular nodes', () => {
const componentData1 = { help: 'im something' };
const componentData2 = { help: 'im something else' };
const FirstElement = createElementWithComponentData({
type: 'find.me',
data: componentData1,
});
const SecondElement = createElementWithComponentData({
type: 'dont.find.me',
data: componentData2,
});
const testCase = [
<FirstElement />,
<FirstElement />,
<SecondElement />,
<FirstElement />,
];
const returnedData = collectComponentData(testCase, 'find.me');
expect(returnedData).toEqual([
componentData1,
componentData1,
componentData1,
]);
});
});
});
plugins/scaffolder/src/extensions/helpers.ts
-73
View File
@@ -1,73 +0,0 @@
/*
* Copyright 2021 Spotify AB
*
* 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 from 'react';
import { getComponentData } from '@backstage/core';
export const collectComponentData = <T>(
children: React.ReactNode,
componentDataKey: string,
) => {
const stack = [children];
const found: T[] = [];
while (stack.length) {
const current: React.ReactNode = stack.pop()!;
React.Children.forEach(current, child => {
if (!React.isValidElement(child)) {
return;
}
const data = getComponentData<T>(child, componentDataKey);
if (data) {
found.push(data);
}
if (child.props.children) {
stack.push(child.props.children);
}
});
}
return found;
};
export const collectChildren = (
component: React.ReactNode,
componentDataKey: string,
) => {
const stack = [component];
const found: React.ReactNode[] = [];
while (stack.length) {
const current: React.ReactNode = stack.pop()!;
React.Children.forEach(current, child => {
if (!React.isValidElement(child)) {
return;
}
if (child.props.children) {
if (getComponentData(child, componentDataKey)) {
found.push(child.props.children);
}
stack.push(child.props.children);
}
});
}
return found;
};