Skip to content

Commit dbfeb0b

Browse files
mareklibramareklibra
authored
feat(orchestrator): add ActiveMultiselect widget (#877)
* feat(orchestrator): add ActiveMultiSelect widget and replace @material-ui by @mui Signed-off-by: Marek Libra <marek.libra@gmail.com> * yarn.lock * Enable passing complex objects via templates * Add ClassNameGenerator config for v5 mui --------- Signed-off-by: Marek Libra <marek.libra@gmail.com>
1 parent e013665 commit dbfeb0b

75 files changed

Lines changed: 845 additions & 368 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎workspaces/orchestrator/docs/orchestratorFormWidgets.md‎

Lines changed: 63 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,10 @@ Referenced as: `"ui:widget": "ActiveTextInput"`.
118118

119119
A smart component based on the [@mui/material/TextField](https://mui.com/material-ui/react-text-field/) keeping look&feel with other RJSF-default fields.
120120

121+
![example](./widgets/ActiveTextInput_01.png)
122+
123+
![example](./widgets/ActiveTextInput_02.png)
124+
121125
### ActiveTextInput Data fetching
122126

123127
When instantiated, it loads (prefetch) the **default** value using a single HTTP call based on the `fetch:*` from the `ui:props`.
@@ -201,6 +205,10 @@ Referenced as: `"ui:widget": "ActiveDropdown"`.
201205

202206
A smart component based on the [@mui/material/Select](https://mui.com/material-ui/react-select/) keeping look&feel with other RJSF-default fields.
203207

208+
![example](./widgets/ActiveDropdown_01.png)
209+
210+
![example](./widgets/ActiveDropdown_02.png)
211+
204212
### ActiveDropdown Data Fetching and validation
205213

206214
Retrieving a list of items (each consisting of a value and a label) and validating the field operates similarly to the `ActiveTextInput` component.
@@ -229,6 +237,48 @@ The widget supports following `ui:props`:
229237

230238
[Check more details](#content-of-uiprops)
231239

240+
## ActiveMultiSelect widget
241+
242+
Referenced as: `"ui:widget": "ActiveMultiSelect"`.
243+
244+
A smart component based on the [@mui/material/TextField](https://mui.com/material-ui/react-text-field/) keeping look&feel with other RJSF-default fields with autocompletion.
245+
246+
The selected items are represented as chips, the value of the field is an array of strings.
247+
248+
Users can only enter values that are provided in the list returned by `fetch:url` and `fetch:response:autocomplete`.
249+
250+
![example](./widgets/ActiveMultiSelect_01.png)
251+
252+
![example](./widgets/ActiveMultiSelect_02.png)
253+
254+
![example](./widgets/ActiveMultiSelect_03.png)
255+
256+
![example](./widgets/ActiveMultiSelect_04.png)
257+
258+
### ActiveMultiSelect Data Fetching and validation
259+
260+
Retrieving a list of autocomplete items (array of strings for autocompletion) and validating the field operates similarly to the `ActiveTextInput` component.
261+
262+
Validation is similar to the `ActiveTextInput` as well, just the value being passed is an array of strings.
263+
264+
### ActiveMultiSelect widget ui:props
265+
266+
The widget supports following `ui:props`:
267+
268+
- fetch:url
269+
- fetch:headers
270+
- fetch:method
271+
- fetch:body
272+
- fetch:retrigger
273+
- fetch:response:autocomplete
274+
- validate:url
275+
- validate:method
276+
- validate:headers
277+
- validate:body
278+
- validate:retrigger
279+
280+
[Check more details](#content-of-uiprops)
281+
232282
## ActiveText widget
233283

234284
Referenced as: `"ui:widget": "ActiveText"`.
@@ -390,19 +440,19 @@ The widgets manage waiting for asynchronous promises and chains of functions to
390440
When exposing additional keys in the future, we will consider not only the [frontend-visibility](https://backstage.io/docs/conf/defining/#visibility) but security as well, since a malicious workflow can retrieve configuration of plugins or Backstage, eventually with their secrets.
391441
That’s the reason for listing the exposed keys explicitly.
392442

393-
| Key Family | Key | Value of at runtime\<br\>(skipping promises for simplicity) |
394-
| :-------------------------------------------------------------------------: | :---------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
395-
| current | \[whatever property name\] | Value of other field/property of the form. The properties build hierarchy separated by `.` (dots) matching the structure of fields/objects defined by the data input schema. |
396-
| identityApi | token | IdentityApi.getCredentials().token |
397-
| | userEntityRef | IdentityApi.getBackstageIdentity().userEntityRef |
398-
| | profileEmail | IdentityApi.getProfileInfo().email |
399-
| | displayName | IdentityApi.getProfileInfo().displayName |
400-
| microsoftAuthApi gitlabAuthApi googleAuthApi | openIdToken | OpenIdConnectApi.getIdToken(undefined /\* defaults \*/) Mind this is not available for Github and Atlassian |
401-
| atlassianAuthApi githubAuthApi microsoftAuthApi gitlabAuthApi googleAuthApi | token | OAuthApi.getAccessToken(undefined, undefined) |
402-
| atlassianAuthApi githubAuthApi microsoftAuthApi gitlabAuthApi googleAuthApi | profileEmail | ProfileInfoApi.getProfile(undefined).email |
403-
| atlassianAuthApi githubAuthApi microsoftAuthApi gitlabAuthApi googleAuthApi | profileName | ProfileInfoApi.getProfile(undefined).displayName |
404-
| rjsfConfig | orchestrator.\[whatever key\] | configApi.getOptionalString(\`${orchestrator.rjsf-widgets.\[whatever key\]}\`) |
405-
| backend | baseUrl | configApi.getString('backend.baseUrl') - useful for building URLs with proxy without hardcoding the backend |
443+
| Key Family | Key | Value of at runtime\<br\>(skipping promises for simplicity) |
444+
| :-------------------------------------------------------------------------: | :---------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
445+
| current | \[whatever property name\] | Value of other field/property of the form. The properties build hierarchy separated by `.` (dots) matching the structure of fields/objects defined by the data input schema. Arrays or branches of a complex object structure can be passed as well, data are encoded into JSON in that case. |
446+
| identityApi | token | IdentityApi.getCredentials().token |
447+
| | userEntityRef | IdentityApi.getBackstageIdentity().userEntityRef |
448+
| | profileEmail | IdentityApi.getProfileInfo().email |
449+
| | displayName | IdentityApi.getProfileInfo().displayName |
450+
| microsoftAuthApi gitlabAuthApi googleAuthApi | openIdToken | OpenIdConnectApi.getIdToken(undefined /\* defaults \*/) Mind this is not available for Github and Atlassian |
451+
| atlassianAuthApi githubAuthApi microsoftAuthApi gitlabAuthApi googleAuthApi | token | OAuthApi.getAccessToken(undefined, undefined) |
452+
| atlassianAuthApi githubAuthApi microsoftAuthApi gitlabAuthApi googleAuthApi | profileEmail | ProfileInfoApi.getProfile(undefined).email |
453+
| atlassianAuthApi githubAuthApi microsoftAuthApi gitlabAuthApi googleAuthApi | profileName | ProfileInfoApi.getProfile(undefined).displayName |
454+
| rjsfConfig | orchestrator.\[whatever key\] | configApi.getOptionalString(\`${orchestrator.rjsf-widgets.\[whatever key\]}\`) |
455+
| backend | baseUrl | configApi.getString('backend.baseUrl') - useful for building URLs with proxy without hardcoding the backend |
406456

407457
## Retrieving Data from Backstage Catalog
408458

‎workspaces/orchestrator/docs/widgets/ActiveDropdown_01.png‎

5.82 KB
Loading

‎workspaces/orchestrator/docs/widgets/ActiveDropdown_02.png‎

13.7 KB
Loading

‎workspaces/orchestrator/docs/widgets/ActiveMultiSelect_01.png‎

6.58 KB
Loading

‎workspaces/orchestrator/docs/widgets/ActiveMultiSelect_02.png‎

19.5 KB
Loading

‎workspaces/orchestrator/docs/widgets/ActiveMultiSelect_03.png‎

7.28 KB
Loading

‎workspaces/orchestrator/docs/widgets/ActiveMultiSelect_04.png‎

19.7 KB
Loading

‎workspaces/orchestrator/docs/widgets/ActiveTextInput_01.png‎

7.12 KB
Loading

‎workspaces/orchestrator/docs/widgets/ActiveTextInput_02.png‎

19.7 KB
Loading

‎workspaces/orchestrator/plugins/orchestrator-form-api/report.api.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type { JSONSchema7 } from 'json-schema';
1414
import { UiSchema } from '@rjsf/utils';
1515

1616
// @public
17-
export type FormDecoratorProps = Pick<FormProps<JsonObject, JSONSchema7, OrchestratorFormContextProps>, 'formData' | 'formContext' | 'widgets' | 'onChange' | 'customValidate'> & {
17+
export type FormDecoratorProps = Pick<FormProps<JsonObject, JSONSchema7, OrchestratorFormContextProps>, 'formData' | 'formContext' | 'widgets' | 'onChange' | 'customValidate' | 'templates'> & {
1818
getExtraErrors?: (formData: JsonObject, uiSchema: OrchestratorFormContextProps['uiSchema']) => Promise<ErrorSchema<JsonObject>> | undefined;
1919
};
2020

0 commit comments

Comments
 (0)