Skip to content

feat: Add custom content to ConditionList widget #3849

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.

Sign up for GitHub

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

Merged
mrCherry97 merged 3 commits into from
Apr 15, 2025
Merged

feat: Add custom content to ConditionList widget #3849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ebfd933
feat: add custom content to ConditionList widget
OliwiaGowor Apr 11, 2025
157e8d9
Review adjustments
OliwiaGowor Apr 15, 2025
f8e67cc
fix formatting
OliwiaGowor Apr 15, 2025
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
25 changes: 22 additions & 3 deletions docs/extensibility/50-list-and-details-widgets.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,10 @@ This is an exaple of kind only:

The `ConditionList` widget renders the conditions as an expandable list with condition details. This widget is primarily designed for the overview section **data.details.status** or **data.details.status.body**

| Parameter | Required | Type | Description |
| -------------- | -------- | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **highlights** | No | | A map of highlight rules that will only be applied to the `condition` matching `type`. Key refers to the type of highlight, while the rule can be a plain array of values ​​or a string containing the [JSONata](100-jsonata.md) rule. Allowed keys are `informative`, `positive`, `negative`, `critical`, and `type`. <br><br> With the `type` key (required), you can specify which condition the highlighting must be applied to. It must contain one of the `types` of the source condition. <br><br> If no highlighting is provided, the following values ​​are automatically supported: <br> - rendered as informational: `Unknown`. <br> - rendered as positive: `True`. <br> - rendered as critical: `False`. |
| Parameter | Required | Type | Description |
| ----------------- | -------- | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **highlights** | No | | A map of highlight rules that will only be applied to the `condition` matching `type`. Key refers to the type of highlight, while the rule can be a plain array of values ​​or a string containing the [JSONata](100-jsonata.md) rule. Allowed keys are `informative`, `positive`, `negative`, `critical`, and `type`. <br><br> With the `type` key (required), you can specify which condition the highlighting must be applied to. It must contain one of the `types` of the source condition. <br><br> If no highlighting is provided, the following values ​​are automatically supported: <br> - rendered as informational: `Unknown`. <br> - rendered as positive: `True`. <br> - rendered as critical: `False`. |
| **customContent** | No | | Allows adding custom content to specific condition types. Each object contains: <br> - `type` (required): The condition type to match <br> - `value` (required): A string, JSONata expression, or a widget definition to render custom content <br> - `header`: Optional header text for the custom content section <br><br> The custom content is rendered above the condition's default message. |

See the following example of the standard `ConditionList`:

Expand Down Expand Up @@ -141,6 +142,24 @@ status:

<img src="./assets/display-widgets/ConditionListHighlights.png" alt="Example of a condition list widget with overriden statuses">

This is an example of `ConditionList` with added custom content:

```yaml
status:
body:
- name: Condition details
widget: ConditionList
source: status.conditions
customContent:
- value:
widget: Badge
source: $filter(status.conditions, function($c){$c.type = 'AbleToScale'}).reason
type: AbleToScale
header: Reason
```

<img src="./assets/display-widgets/ConditionListContent.png" alt="Example of a condition list widget with custom content" width="30%">

### `ExternalLink`

The `ExternalLink` widgets render the link to an external page.
Expand Down
Binary file added docs/extensibility/assets/display-widgets/ConditionListContent.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions src/components/Extensibility/components/ConditionList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { ConditionList as ConditionListComponent } from 'shared/components/Condi
import { useJsonata } from '../hooks/useJsonata';
import { useTranslation } from 'react-i18next';
import { getBadgeType } from 'components/Extensibility/helpers';
import { Widget } from './Widget';

export const ConditionList = ({
value,
Expand All @@ -28,6 +29,27 @@ export const ConditionList = ({

const conditions = value.map(v => {
const override = structure?.highlights?.find(o => o.type === v.type);
const customContent = structure?.customContent
?.map(c => {
return {
...c,
value:
typeof c.value === 'object' ? (
<Widget
value={originalResource}
structure={c.value}
originalResource={originalResource}
scope={scope}
singleRootResource={singleRootResource}
embedResource={embedResource}
/>
) : (
jsonata(c.value)
),
};
})
.filter(c => c.type === v.type);

const badgeType = override
? getBadgeType(override, v.status, jsonata, t)
: undefined;
Expand All @@ -38,6 +60,7 @@ export const ConditionList = ({
overrideStatusType: badgeType,
},
message: v.message,
customContent: customContent ?? [],
};
});

Expand Down
16 changes: 8 additions & 8 deletions src/shared/components/ExpandableListItem/ExpandableListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,14 +79,6 @@ export const ExpandableListItem = ({
</ListItemStandard>
{expanded && (
<>
{content && (
<div className="expandable-item__message sap-margin-x-small sap-margin-y-tiny">
<div className="title bsl-has-color-status-4 ">
{`${t('common.headers.message')}:`}
</div>
{content}
</div>
)}
{customContent &&
customContent.map((element, index) => (
<div
Expand All @@ -103,6 +95,14 @@ export const ExpandableListItem = ({
{element?.value}
</div>
))}
{content && (
<div className="expandable-item__message sap-margin-x-small sap-margin-y-tiny">
<div className="title bsl-has-color-status-4 ">
{`${t('common.headers.message')}:`}
</div>
{content}
</div>
)}
</>
)}
</>
Expand Down
Loading