Skip to content

Commit 4cca2af

Browse files
opayne1opayne1
authored
Merge pull request #94126 from opayne1/osdocs-14821
OSDOCS#14821: Updates to dynamic plugin sdk docs
2 parents b253816 + 042f380 commit 4cca2af

File tree

2 files changed

+181
-136
lines changed

2 files changed

+181
-136
lines changed

‎modules/dynamic-plugin-api.adoc

Lines changed: 179 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -268,45 +268,6 @@ K8sResourceCommon type
268268
|`match` |match object provided by React Router
269269
|===
270270

271-
[discrete]
272-
== `VirtualizedTable`
273-
274-
A component for making virtualized tables.
275-
276-
.Example
277-
[source,text]
278-
----
279-
const MachineList: React.FC<MachineListProps> = (props) => {
280-
return (
281-
<VirtualizedTable<MachineKind>
282-
{...props}
283-
aria-label='Machines'
284-
columns={getMachineColumns}
285-
Row={getMachineTableRow}
286-
/>
287-
);
288-
}
289-
----
290-
291-
[cols=",",options="header",]
292-
|===
293-
|Parameter Name |Description
294-
|`data` |data for table
295-
|`loaded` |flag indicating data is loaded
296-
|`loadError` |error object if issue loading data
297-
|`columns` |column setup
298-
|`Row` |row setup
299-
|`unfilteredData` |original data without filter
300-
|`NoDataEmptyMsg` |(optional) no data empty message component
301-
|`EmptyMsg` |(optional) empty message component
302-
|`scrollNode` |(optional) function to handle scroll
303-
|`label` |(optional) label for table
304-
|`ariaLabel` |(optional) aria label
305-
|`gridBreakPoint` |sizing of how to break up grid for responsiveness
306-
|`onSelect` |(optional) function for handling select of table
307-
|`rowData` |(optional) data specific to row
308-
|===
309-
310271
[discrete]
311272
== `TableData`
312273

@@ -518,96 +479,6 @@ determine access
518479
|`children` |(optional) children for the dropdown toggle
519480
|===
520481

521-
[discrete]
522-
== `ListPageFilter`
523-
524-
Component that generates filter for list page.
525-
526-
.Example
527-
[source,tsx]
528-
----
529-
// See implementation for more details on RowFilter and FilterValue types
530-
const [staticData, filteredData, onFilterChange] = useListPageFilter(
531-
data,
532-
rowFilters,
533-
staticFilters,
534-
);
535-
// ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
536-
return (
537-
<>
538-
<ListPageHeader .../>
539-
<ListPagBody>
540-
<ListPageFilter data={staticData} onFilterChange={onFilterChange} />
541-
<List data={filteredData} />
542-
</ListPageBody>
543-
</>
544-
)
545-
----
546-
547-
[cols=",",options="header",]
548-
|===
549-
|Parameter Name |Description
550-
|`data` |An array of data points
551-
552-
|`loaded` |indicates that data has loaded
553-
554-
|`onFilterChange` |callback function for when filter is updated
555-
556-
|`rowFilters` |(optional) An array of RowFilter elements that define the
557-
available filter options
558-
559-
|`nameFilterPlaceholder` |(optional) placeholder for name filter
560-
561-
|`labelFilterPlaceholder` |(optional) placeholder for label filter
562-
563-
|`hideLabelFilter` |(optional) only shows the name filter instead of
564-
both name and label filter
565-
566-
|`hideNameLabelFilter` |(optional) hides both name and label filter
567-
568-
|`columnLayout` |(optional) column layout object
569-
570-
|`hideColumnManagement` |(optional) flag to hide the column management
571-
|===
572-
573-
[discrete]
574-
== `useListPageFilter`
575-
576-
A hook that manages filter state for the ListPageFilter component. It returns a tuple containing the data filtered by all static filters, the data filtered by all static and row filters, and a callback that updates rowFilters.
577-
578-
.Example
579-
[source,tsx]
580-
----
581-
// See implementation for more details on RowFilter and FilterValue types
582-
const [staticData, filteredData, onFilterChange] = useListPageFilter(
583-
data,
584-
rowFilters,
585-
staticFilters,
586-
);
587-
// ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
588-
return (
589-
<>
590-
<ListPageHeader .../>
591-
<ListPagBody>
592-
<ListPageFilter data={staticData} onFilterChange={onFilterChange} />
593-
<List data={filteredData} />
594-
</ListPageBody>
595-
</>
596-
)
597-
----
598-
599-
[cols=",",options="header",]
600-
|===
601-
|Parameter Name |Description
602-
|`data` |An array of data points
603-
604-
|`rowFilters` |(optional) An array of RowFilter elements that define the
605-
available filter options
606-
607-
|`staticFilters` |(optional) An array of FilterValue elements that are
608-
statically applied to the data
609-
|===
610-
611482
[discrete]
612483
== `ResourceLink`
613484

@@ -1364,14 +1235,42 @@ tooltip.
13641235
|===
13651236

13661237
[discrete]
1367-
== `useModal`
1238+
== `useOverlay`
13681239

1369-
A hook to launch Modals.
1240+
The `useOverlay` hook inserts a component directly to the DOM outside the web console's page structure. This allows the component to be freely styled and positioning with CSS. For example, to float the overlay in the top right corner of the UI: `style={{ position: 'absolute', right: '2rem', top: '2rem', zIndex: 999 }}`. It is possible to add multiple overlays by calling `useOverlay` multiple times. A `closeOverlay` function is passed to the overlay component. Calling it removes the component from the DOM without affecting any other overlays that might have been added with `useOverlay`. Additional props can be passed to `useOverlay` and they will be passed through to the overlay component.
13701241

13711242
.Example
13721243
[source,tsx]
13731244
----
1374-
const context: AppPage: React.FC = () => {<br/> const [launchModal] = useModal();<br/> const onClick = () => launchModal(ModalComponent);<br/> return (<br/> <Button onClick={onClick}>Launch a Modal</Button><br/> )<br/>}<br/>`
1245+
const OverlayComponent = ({ closeOverlay, heading }) => {
1246+
return (
1247+
<div style={{ position: 'absolute', right: '2rem', top: '2rem', zIndex: 999 }}>
1248+
<h2>{heading}</h2>
1249+
<Button onClick={closeOverlay}>Close</Button>
1250+
</div>
1251+
);
1252+
};
1253+
1254+
const ModalComponent = ({ body, closeOverlay, title }) => (
1255+
<Modal isOpen onClose={closeOverlay}>
1256+
<ModalHeader title={title} />
1257+
<ModalBody>{body}</ModalBody>
1258+
</Modal>
1259+
);
1260+
1261+
const AppPage: React.FC = () => {
1262+
const launchOverlay = useOverlay();
1263+
const onClickOverlay = () => {
1264+
launchOverlay(OverlayComponent, { heading: 'Test overlay' });
1265+
};
1266+
const onClickModal = () => {
1267+
launchOverlay(ModalComponent, { body: 'Test modal', title: 'Overlay modal' });
1268+
};
1269+
return (
1270+
<Button onClick={onClickOverlay}>Launch an Overlay</Button>
1271+
<Button onClick={onClickModal}>Launch a Modal</Button>
1272+
)
1273+
}
13751274
----
13761275

13771276
[discrete]
@@ -1690,10 +1589,139 @@ Deprecated: This hook is not related to console functionality. Hook that ensures
16901589

16911590
:!power-bi-url:
16921591

1592+
[discrete]
1593+
== `VirtualizedTable`
1594+
1595+
Deprecated: Use PatternFly's link:https://www.patternfly.org/extensions/data-view/overview/[Data view] instead. A component for making virtualized tables.
1596+
1597+
.Example
1598+
[source,text]
1599+
----
1600+
const MachineList: React.FC<MachineListProps> = (props) => {
1601+
return (
1602+
<VirtualizedTable<MachineKind>
1603+
{...props}
1604+
aria-label='Machines'
1605+
columns={getMachineColumns}
1606+
Row={getMachineTableRow}
1607+
/>
1608+
);
1609+
}
1610+
----
1611+
1612+
[cols=",",options="header",]
1613+
|===
1614+
|Parameter Name |Description
1615+
|`data` |data for table
1616+
|`loaded` |flag indicating data is loaded
1617+
|`loadError` |error object if issue loading data
1618+
|`columns` |column setup
1619+
|`Row` |row setup
1620+
|`unfilteredData` |original data without filter
1621+
|`NoDataEmptyMsg` |(optional) no data empty message component
1622+
|`EmptyMsg` |(optional) empty message component
1623+
|`scrollNode` |(optional) function to handle scroll
1624+
|`label` |(optional) label for table
1625+
|`ariaLabel` |(optional) aria label
1626+
|`gridBreakPoint` |sizing of how to break up grid for responsiveness
1627+
|`onSelect` |(optional) function for handling select of table
1628+
|`rowData` |(optional) data specific to row
1629+
|===
1630+
1631+
[discrete]
1632+
== `ListPageFilter`
1633+
1634+
Deprecated: Use PatternFly's link:https://www.patternfly.org/extensions/data-view/overview/[Data view] instead. Component that generates filter for list page.
1635+
1636+
.Example
1637+
[source,tsx]
1638+
----
1639+
// See implementation for more details on RowFilter and FilterValue types
1640+
const [staticData, filteredData, onFilterChange] = useListPageFilter(
1641+
data,
1642+
rowFilters,
1643+
staticFilters,
1644+
);
1645+
// ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
1646+
return (
1647+
<>
1648+
<ListPageHeader .../>
1649+
<ListPagBody>
1650+
<ListPageFilter data={staticData} onFilterChange={onFilterChange} />
1651+
<List data={filteredData} />
1652+
</ListPageBody>
1653+
</>
1654+
)
1655+
----
1656+
1657+
[cols=",",options="header",]
1658+
|===
1659+
|Parameter Name |Description
1660+
|`data` |An array of data points
1661+
1662+
|`loaded` |indicates that data has loaded
1663+
1664+
|`onFilterChange` |callback function for when filter is updated
1665+
1666+
|`rowFilters` |(optional) An array of RowFilter elements that define the
1667+
available filter options
1668+
1669+
|`nameFilterPlaceholder` |(optional) placeholder for name filter
1670+
1671+
|`labelFilterPlaceholder` |(optional) placeholder for label filter
1672+
1673+
|`hideLabelFilter` |(optional) only shows the name filter instead of
1674+
both name and label filter
1675+
1676+
|`hideNameLabelFilter` |(optional) hides both name and label filter
1677+
1678+
|`columnLayout` |(optional) column layout object
1679+
1680+
|`hideColumnManagement` |(optional) flag to hide the column management
1681+
|===
1682+
1683+
[discrete]
1684+
== `useListPageFilter`
1685+
1686+
Deprecated: Use PatternFly's link:https://www.patternfly.org/extensions/data-view/overview/[Data view] instead. A hook that manages filter state for the ListPageFilter component. It returns a tuple containing the data filtered by all static filters, the data filtered by all static and row filters, and a callback that updates rowFilters.
1687+
1688+
.Example
1689+
[source,tsx]
1690+
----
1691+
// See implementation for more details on RowFilter and FilterValue types
1692+
const [staticData, filteredData, onFilterChange] = useListPageFilter(
1693+
data,
1694+
rowFilters,
1695+
staticFilters,
1696+
);
1697+
// ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
1698+
return (
1699+
<>
1700+
<ListPageHeader .../>
1701+
<ListPagBody>
1702+
<ListPageFilter data={staticData} onFilterChange={onFilterChange} />
1703+
<List data={filteredData} />
1704+
</ListPageBody>
1705+
</>
1706+
)
1707+
----
1708+
1709+
[cols=",",options="header",]
1710+
|===
1711+
|Parameter Name |Description
1712+
|`data` |An array of data points
1713+
1714+
|`rowFilters` |(optional) An array of RowFilter elements that define the
1715+
available filter options
1716+
1717+
|`staticFilters` |(optional) An array of FilterValue elements that are
1718+
statically applied to the data
1719+
|===
1720+
16931721
[discrete]
16941722
== `YAMLEditor`
16951723

1696-
Deprecated: A basic lazy loaded YAML editor with hover help and completion.
1724+
Deprecated: Use `CodeEditor` instead. A basic lazy loaded YAML editor with hover help and completion.
16971725

16981726
.Example
16991727
[source,text]
@@ -1726,4 +1754,21 @@ section on top of the editor.
17261754
|`ref` |React reference to `{ editor?: IStandaloneCodeEditor }`. Using
17271755
the `editor` property, you are able to access to all methods to control
17281756
the editor.
1729-
|===
1757+
|===
1758+
1759+
[discrete]
1760+
== `useModal`
1761+
1762+
Deprecated: Use `useOverlay` from `@console/dynamic-plugin-sdk` instead. A hook to launch Modals.
1763+
1764+
.Example
1765+
[source,tsx]
1766+
----
1767+
const AppPage: React.FC = () => {
1768+
const launchModal = useModal();
1769+
const onClick = () => launchModal(ModalComponent);
1770+
return (
1771+
<Button onClick={onClick}>Launch a Modal</Button>
1772+
)
1773+
}
1774+
----

‎modules/dynamic-plugin-sdk-extensions.adoc

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1483,7 +1483,7 @@ custom environment variables for
14831483
[discrete]
14841484
== `console.dashboards/overview/detail/item`
14851485

1486-
Deprecated. use `CustomOverviewDetailItem` type instead
1486+
Deprecated: use `CustomOverviewDetailItem` type instead.
14871487

14881488
[cols=",,,",options="header",]
14891489
|===
@@ -1495,7 +1495,7 @@ on the `DetailItem` component
14951495
[discrete]
14961496
== `console.page/resource/tab`
14971497

1498-
Deprecated. Use `console.tab/horizontalNav` instead. Adds a new resource tab page to Console router.
1498+
Deprecated: Use `console.tab/horizontalNav` instead. Adds a new resource tab page to Console router.
14991499

15001500
[cols=",,,",options="header",]
15011501
|===

0 commit comments

Comments
 (0)