@ansible/ansible-ui-framework 0.0.478 → 0.0.479

package/cjs/PageActions/PageAction.d.ts

@@ -12,23 +12,41 @@ export interface IPageActionCommon {
 export interface IPageActionSeperator {
     type: PageActionType.seperator;
 }
-export type IPageActionButton = IPageActionCommon & {
+type IPageActionWithLink = IPageActionCommon & {
+    type: PageActionType.button;
+    variant?: ButtonVariant;
+    href: string;
+    onClick?: never;
+};
+type IPageActionWithOnClick = IPageActionCommon & {
     type: PageActionType.button;
     variant?: ButtonVariant;
     onClick: () => void;
+    href?: never;
 };
+export type IPageActionButton = IPageActionWithLink | IPageActionWithOnClick;
 export type IPageBulkAction<T extends object> = IPageActionCommon & {
     type: PageActionType.bulk;
     variant?: ButtonVariant;
     onClick: (selectedItems: T[]) => void;
 };
-export type IPageSingleAction<T extends object> = IPageActionCommon & {
+type IPageSingleActionWithLink<T extends object> = IPageActionCommon & {
+    type: PageActionType.singleLink;
+    variant?: ButtonVariant;
+    href: (item: T) => string;
+    onClick?: never;
+    isDisabled?: (item: T) => string | undefined;
+    isHidden?: (item: T) => boolean;
+};
+type IPageSingleActionWithOnClick<T extends object> = IPageActionCommon & {
     type: PageActionType.single;
     variant?: ButtonVariant;
     onClick: (item: T) => void;
+    href?: never;
     isDisabled?: (item: T) => string | undefined;
     isHidden?: (item: T) => boolean;
 };
+export type IPageSingleAction<T extends object> = IPageSingleActionWithLink<T> | IPageSingleActionWithOnClick<T>;
 export type IPageDropdownAction<T extends object> = IPageActionCommon & {
     type: PageActionType.dropdown;
     variant?: ButtonVariant;
@@ -36,3 +54,4 @@ export type IPageDropdownAction<T extends object> = IPageActionCommon & {
     isDisabled?: (item: T) => string;
     options: IPageAction<T>[];
 };
+export {};

package/cjs/PageActions/PageActionType.d.ts

@@ -2,6 +2,7 @@ export declare enum PageActionType {
     seperator = "seperator",
     button = "button",
     single = "single",
+    singleLink = "singleLink",
     bulk = "bulk",
     dropdown = "dropdown"
 }

package/cjs/PageActions/PageActionType.js

@@ -6,6 +6,7 @@ var PageActionType;
     PageActionType["seperator"] = "seperator";
     PageActionType["button"] = "button";
     PageActionType["single"] = "single";
+    PageActionType["singleLink"] = "singleLink";
     PageActionType["bulk"] = "bulk";
     PageActionType["dropdown"] = "dropdown";
 })(PageActionType = exports.PageActionType || (exports.PageActionType = {}));

package/cjs/PageActions/PageActions.js

@@ -57,6 +57,7 @@ function isPinnedAction(action) {
 function isHiddenAction(action, selectedItem) {
     switch (action.type) {
         case PageActionType_1.PageActionType.single:
+        case PageActionType_1.PageActionType.singleLink:
         case PageActionType_1.PageActionType.dropdown:
             return action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
         case PageActionType_1.PageActionType.bulk:

package/cjs/PageActions/PageButtonAction.js

@@ -15,6 +15,7 @@ exports.PageButtonAction = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
 function PageButtonAction(props) {
     var _a, _b;
     var action = props.action, isSecondary = props.isSecondary, wrapper = props.wrapper;
@@ -32,6 +33,8 @@ function PageButtonAction(props) {
     if (props.iconOnly) {
         variant = react_core_1.ButtonVariant.plain;
     }
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ id: props.action.label.toLowerCase().split(' ').join('-'), variant: variant, isDanger: action.isDanger, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
+    var id = props.action.label.toLowerCase().split(' ').join('-');
+    var content = props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label;
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ id: id, variant: variant, isDanger: action.isDanger, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick ? action.onClick : undefined, component: action.href ? function (props) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: action.href })); } : undefined }, { children: content })) })) }));
 }
 exports.PageButtonAction = PageButtonAction;

package/cjs/PageActions/PageDropdownAction.js

@@ -41,6 +41,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_icons_1 = require("@patternfly/react-icons");
 var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
 var PageActions_1 = require("./PageActions");
 var PageActionType_1 = require("./PageActionType");
 function PageDropdownAction(props) {
@@ -72,14 +73,17 @@ exports.PageDropdownAction = PageDropdownAction;
 function PageDropdownActionItem(props) {
     var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, hasIcons = props.hasIcons, index = props.index;
     switch (action.type) {
-        case PageActionType_1.PageActionType.single: {
+        case PageActionType_1.PageActionType.single:
+        case PageActionType_1.PageActionType.singleLink: {
             var Icon = action.icon;
             if (!Icon && hasIcons)
                 Icon = TransparentIcon;
             var tooltip = action.tooltip;
             var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
             tooltip = isDisabled ? isDisabled : tooltip;
-            return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: function () { return selectedItem && action.onClick(selectedItem); }, isAriaDisabled: Boolean(isDisabled), icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
+            return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: action.onClick ? function () { return selectedItem && action.onClick(selectedItem); } : undefined, component: action.href
+                        ? function (props) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: selectedItem ? action.href(selectedItem) : '' }))); }
+                        : undefined, isAriaDisabled: Boolean(isDisabled), icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
                         color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
                     } }, { children: action.label })) }), action.label));
         }
@@ -94,7 +98,7 @@ function PageDropdownActionItem(props) {
                 tooltip = 'No selections';
                 isDisabled = true;
             }
-            return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: function () { return action.onClick(selectedItems); }, isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
+            return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: action.onClick ? function () { return action.onClick(selectedItems); } : undefined, component: !action.onClick ? function (props) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: action.href })); } : undefined, isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
                         color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
                     } }, { children: action.label })) }), action.label));
         }

package/cjs/PageActions/PagePinnedActions.js

@@ -32,7 +32,8 @@ function PagePinnedAction(props) {
         case PageActionType_1.PageActionType.seperator: {
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         }
-        case PageActionType_1.PageActionType.single: {
+        case PageActionType_1.PageActionType.single:
+        case PageActionType_1.PageActionType.singleLink: {
             return ((0, jsx_runtime_1.jsx)(PageSingleAction_1.PageSingleAction, { action: action, selectedItem: selectedItem, iconOnly: props.iconOnly, wrapper: wrapper }));
         }
         case PageActionType_1.PageActionType.bulk: {

package/cjs/PageActions/PageSingleAction.js

@@ -15,6 +15,7 @@ exports.PageSingleAction = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
 function PageSingleAction(props) {
     var _a, _b;
     var action = props.action, selectedItem = props.selectedItem, wrapper = props.wrapper;
@@ -30,6 +31,8 @@ function PageSingleAction(props) {
     if (props.iconOnly) {
         variant = react_core_1.ButtonVariant.plain;
     }
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ id: props.action.label.toLowerCase().split(' ').join('-'), variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { marginLeft: -4, paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: Boolean(isDisabled), onClick: function () { return selectedItem && action.onClick(selectedItem); }, isDanger: action.isDanger }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ id: props.action.label.toLowerCase().split(' ').join('-'), variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { marginLeft: -4, paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: Boolean(isDisabled), onClick: action.onClick ? function () { return selectedItem && action.onClick(selectedItem); } : undefined, component: action.href
+                    ? function (props) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: selectedItem && action.href(selectedItem) })); }
+                    : undefined, isDanger: action.isDanger }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
 }
 exports.PageSingleAction = PageSingleAction;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.478",
+  "version": "0.0.479",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",