Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added Number widget and documentation #3303

Merged
merged 4 commits into from
Aug 28, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions docs/extensibility/60-form-widgets.md
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ You can use form widgets in the create and/or edit pages in the user interface c

- [Simple widgets](#simple-widgets) that represent a single scalar value
- [`Text`](#text)
- [`Number`](#number)
- [`Switch`](#switch)
- [`Name`](#name)
- [`CodeEditor`](#codeeditor)
@@ -73,6 +74,34 @@ See the following examples:
<img src="./assets/form-widgets/Dropdown.png" alt="Example of a dropdown text widget with a tooltip" style="border: 1px solid #D2D5D9">
<img src="./assets/form-widgets/Dropdown2.png" alt="Example of a dropdown text widget" style="border: 1px solid #D2D5D9">

### `Number`

The `Number` widgets render a field as a number field. They are used by default for all number and integer values.

| Parameter | Required | Type | Description |
| ----------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **description** | No | string | A string displayed in a tooltip when you hover over a question mark icon, next to the input's label. The default value is taken from the CustomResourceDefintion (CRD). |
| **disableOnEdit** | No | boolean | Disables a number field in edit mode, defaults to `false`. |

See the following examples:

```yaml
- path: spec.capacity
name: spec.capacity
widget: Number
```

<img src="./assets/form-widgets/Number.png" alt="Example of a number widget" style="border: 1px solid #D2D5D9">

```yaml
- path: spec.capacity
name: spec.capacity
widget: Number
disableOnEdit: true
```

<img src="./assets/form-widgets/Number2.png" alt="Example of a number widget" style="border: 1px solid #D2D5D9">

### `Switch`

The `Switch` widgets render a switch button that is used to control boolean values.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions public/schemas/schema-form.yaml
Original file line number Diff line number Diff line change
@@ -326,3 +326,18 @@ $widgets:
type: boolean
description: a boolean which specifies if field is disabled on edit.
default: false
Number:
if:
properties:
widget:
const: Number
then:
properties:
description:
type: string
description: A string displayed in a tooltip when you hover over a question mark icon, next to the input's label. The default value is taken from the CustomResourceDefintion (CRD).
disableOnEdit:
type: boolean
description: a boolean which specifies if field is disabled on edit.
default: false

Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ export function NumberRenderer({
required,
compact,
placeholder,
editMode,
...props
}) {
const { tFromStoreKeys, t: tExt } = useGetTranslation();
@@ -26,6 +27,8 @@ export function NumberRenderer({
['min', 'max'].map(prop => [prop, schema.get(prop)]),
);

const disableOnEdit = schema.get('disableOnEdit');

return (
<ResourceForm.FormField
value={value}
@@ -44,6 +47,7 @@ export function NumberRenderer({
data-testid={storeKeys.join('.') || tFromStoreKeys(storeKeys, schema)}
input={Inputs.Number}
compact={compact}
disabled={disableOnEdit && editMode}
{...numberProps}
{...getPropsFromSchema(schema, required, tExt)}
/>
1 change: 1 addition & 0 deletions src/components/Extensibility/components-form/index.js
Original file line number Diff line number Diff line change
@@ -77,6 +77,7 @@ export const widgets = {
*/
Text: StringRenderer,
Switch: SwitchRenderer,
Number: NumberRenderer,
Jsonata,
/*
Text: TextRenderer,
Loading