@ansible/ansible-ui-framework 0.0.349 → 0.0.351

package/cjs/PageTable.d.ts

@@ -75,6 +75,7 @@ export interface ITableColumn<T extends object> {
     minWidth?: number;
     maxWidth?: number;
     enabled?: boolean;
+    isIdColumn?: boolean;
     sort?: string;
     defaultSortDirection?: 'asc' | 'desc';
     defaultSort?: boolean;

package/cjs/PageTable.js

@@ -73,7 +73,7 @@ function PageTable(props) {
     var _a;
     var disableBodyPadding = props.disableBodyPadding;
     disableBodyPadding = true;
-    var toolbarActions = props.toolbarActions;
+    var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
     var _b = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
     var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; })) !==
         undefined;
@@ -88,11 +88,26 @@ function PageTable(props) {
                 ? PageTableViewType_1.PageTableViewTypeE.List
                 : PageTableViewType_1.PageTableViewTypeE.Cards);
     }), 2), viewType = _c[0], setViewType = _c[1];
+    var settings = (0, Settings_1.useSettings)();
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+                height: '100%',
+            } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: {
+                    paddingTop: 64,
+                } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
+    }
+    if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
+        return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
+    }
+    if (itemCount === undefined) {
+        return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "100%" }) })));
+    }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageToolbar_1.PageTableToolbar, __assign({}, props, { openColumnModal: openColumnModal, showSelect: showSelect, viewType: viewType, setViewType: setViewType })), viewType === PageTableViewType_1.PageTableViewTypeE.Table && ((0, jsx_runtime_1.jsx)(PageBody_1.PageBody, __assign({ disablePadding: disableBodyPadding }, { children: (0, jsx_runtime_1.jsx)(PageTableView, __assign({}, props, { tableColumns: managedColumns })) }))), viewType === PageTableViewType_1.PageTableViewTypeE.List && ((0, jsx_runtime_1.jsx)(PageBody_1.PageBody, __assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableList_1.PageTableList, __assign({}, props, { showSelect: showSelect })) }) }))), viewType === PageTableViewType_1.PageTableViewTypeE.Cards && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableCards_1.PageTableCards, __assign({}, props, { showSelect: showSelect })) })), (!props.autoHidePagination || ((_a = props.itemCount) !== null && _a !== void 0 ? _a : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))), columnModal] }));
 }
 exports.PageTable = PageTable;
 function PageTableView(props) {
-    var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, filters = props.filters, error = props.error, onSelect = props.onSelect, unselectAll = props.unselectAll;
+    var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll;
     var t = props.t;
     t = t ? t : function (t) { return t; };
     var showSelect = props.showSelect ||
@@ -119,17 +134,6 @@ function PageTableView(props) {
     (0, resize_observer_1.default)(containerRef, function () { return updateScroll(containerRef.current); });
     (0, react_1.useEffect)(function () { return updateScroll(containerRef.current); }, [updateScroll]);
     var settings = (0, Settings_1.useSettings)();
-    if (error) {
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-                height: '100%',
-            } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: {
-                    paddingTop: 64,
-                } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
-    }
-    if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
-        return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
-    }
     return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "pf-c-scroll-inner-wrapper", style: { height: '100%', marginBottom: -1 }, ref: containerRef, onScroll: onScroll }, { children: [(0, jsx_runtime_1.jsxs)(react_table_1.TableComposable, __assign({ "aria-label": "Simple table", variant: props.compact ? 'compact' : settings.tableLayout === 'compact' ? 'compact' : undefined, gridBreakPoint: "", isStickyHeader: true }, { children: [itemCount === undefined ? ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Th, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}) }) }) })) : ((0, jsx_runtime_1.jsx)(TableHead, __assign({}, props, { showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, tableColumns: tableColumns, onSelect: onSelect }))), (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: itemCount === undefined
                             ? new Array(perPage).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Td, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }) }, index)); })
                             : pageItems === undefined
@@ -170,7 +174,7 @@ function TableHead(props) {
                             backgroundColor: settings.theme === 'dark'
                                 ? 'var(--pf-global--BackgroundColor--300)'
                                 : undefined,
-                            width: index === 0 ? '0%' : undefined,
+                            width: column.isIdColumn ? '0%' : undefined,
                         }, sort: getColumnSort(index, column) }, { children: column.header }), column.header));
                 }), itemActions !== undefined && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ style: {
                         paddingRight: 8,

package/cjs/useInMemoryView.d.ts

@@ -5,6 +5,7 @@ import { IView } from './useView';
 export type IInMemoryView<T extends object> = IView & ISelected<T> & {
     itemCount: number | undefined;
     pageItems: T[] | undefined;
+    error: Error | undefined;
 };
 export declare function useInMemoryView<T extends object>(options: {
     items: T[] | undefined;
@@ -12,4 +13,5 @@ export declare function useInMemoryView<T extends object>(options: {
     toolbarFilters?: IToolbarFilter[];
     disableQueryString?: boolean;
     keyFn: (item: T) => string | number;
+    error?: Error;
 }): IInMemoryView<T>;

package/cjs/useInMemoryView.js

@@ -37,7 +37,7 @@ function useInMemoryView(options) {
         sort: tableColumns && tableColumns.length ? tableColumns[0].sort : undefined,
     }, disableQueryString);
     var page = view.page, perPage = view.perPage, sort = view.sort, sortDirection = view.sortDirection, filters = view.filters;
-    var sorted = (0, useTableItems_1.useSorted)(items !== null && items !== void 0 ? items : []);
+    var sorted = (0, useTableItems_1.useSorted)(items);
     var setSort = sorted.setSort;
     (0, react_1.useEffect)(function () {
         return setSort({
@@ -94,9 +94,9 @@ function useInMemoryView(options) {
     var setPage = paged.setPage, setPerPage = paged.setPerPage;
     (0, react_1.useEffect)(function () { return setPage(page); }, [page, paged, setPage]);
     (0, react_1.useEffect)(function () { return setPerPage(perPage); }, [perPage, paged, setPerPage]);
-    var selection = (0, useTableItems_1.useSelectedInMemory)(items !== null && items !== void 0 ? items : [], keyFn);
+    var selection = (0, useTableItems_1.useSelectedInMemory)(items, keyFn);
     return (0, react_1.useMemo)(function () {
-        return __assign(__assign({ itemCount: items ? filtered.filtered.length : 0, pageItems: items ? paged.paged : undefined }, view), selection);
-    }, [filtered.filtered.length, items, paged.paged, selection, view]);
+        return __assign(__assign({ itemCount: items ? filtered.filtered.length : undefined, pageItems: items ? paged.paged : undefined, error: options.error }, view), selection);
+    }, [filtered.filtered.length, items, options.error, paged.paged, selection, view]);
 }
 exports.useInMemoryView = useInMemoryView;

package/cjs/useTableItems.d.ts

@@ -42,7 +42,7 @@ export interface ISelected<T extends object> {
     keyFn: (item: T) => string | number;
 }
 export declare function useSelected<T extends object>(items: T[], keyFn: (item: T) => string | number): ISelected<T>;
-export declare function useSelectedInMemory<T extends object>(items: T[], keyFn: (item: T) => string | number): {
+export declare function useSelectedInMemory<T extends object>(items: T[] | undefined, keyFn: (item: T) => string | number): {
     selectedItems: T[];
     selectItem: (item: T) => void;
     unselectItem: (item: T) => void;
@@ -59,7 +59,7 @@ export interface ISort<T extends object> {
     sortFn: (l: T, r: T) => number;
     direction: 'asc' | 'desc';
 }
-export declare function useSorted<T extends object>(items: T[]): {
+export declare function useSorted<T extends object>(items: T[] | undefined): {
     sorted: T[];
     sort: ISort<T> | undefined;
     setSort: import("react").Dispatch<import("react").SetStateAction<ISort<T> | undefined>>;

package/cjs/useTableItems.js

@@ -230,15 +230,17 @@ function useSelectedInMemory(items, keyFn) {
         setSelectedMap(function (selectedMap) {
             var e_3, _a;
             var changed = false;
-            var itemsKeys = items.reduce(function (itemsKeys, item) {
-                var key = keyFn(item);
-                itemsKeys[key] = item;
-                if (selectedMap[key] && selectedMap[key] !== item) {
-                    changed = true;
-                    selectedMap[key] = item;
-                }
-                return itemsKeys;
-            }, {});
+            var itemsKeys = !items
+                ? {}
+                : items.reduce(function (itemsKeys, item) {
+                    var key = keyFn(item);
+                    itemsKeys[key] = item;
+                    if (selectedMap[key] && selectedMap[key] !== item) {
+                        changed = true;
+                        selectedMap[key] = item;
+                    }
+                    return itemsKeys;
+                }, {});
             var removeKeyMap = {};
             for (var key in selectedMap) {
                 if (!itemsKeys[key]) {
@@ -329,7 +331,7 @@ function useSelectedInMemory(items, keyFn) {
         });
     }, [keyFn]);
     var selectAll = (0, react_1.useCallback)(function () {
-        selectItems(items);
+        selectItems(items !== null && items !== void 0 ? items : []);
     }, [items, selectItems]);
     var unselectAll = (0, react_1.useCallback)(function () {
         setSelectedMap(function (selectedMap) {
@@ -340,7 +342,7 @@ function useSelectedInMemory(items, keyFn) {
         });
     }, []);
     var selectedItems = (0, react_1.useMemo)(function () { return Object.values(selectedMap); }, [selectedMap]);
-    var allSelected = (0, react_1.useMemo)(function () { return selectedItems.length === items.length; }, [items.length, selectedItems.length]);
+    var allSelected = (0, react_1.useMemo)(function () { var _a; return (_a = selectedItems.length === (items === null || items === void 0 ? void 0 : items.length)) !== null && _a !== void 0 ? _a : 0; }, [items, selectedItems.length]);
     return (0, react_1.useMemo)(function () { return ({
         selectedItems: selectedItems,
         selectItem: selectItem,
@@ -370,6 +372,8 @@ function useSorted(items) {
     var _a = __read((0, react_1.useState)(), 2), sort = _a[0], setSort = _a[1];
     var _b = sort !== null && sort !== void 0 ? sort : {}, direction = _b.direction, sortFn = _b.sortFn;
     var sorted = (0, react_1.useMemo)(function () {
+        if (!items)
+            return [];
         if (sortFn) {
             if (direction === 'asc') {
                 return __spreadArray([], __read(items.sort(sortFn)), false);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.349",
+  "version": "0.0.351",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {