@gen3/workspaces 0.12.66 → 0.12.67

package/dist/index/cjs/index.js

@@ -10,6 +10,7 @@ var core$1 = require('@gen3/core');
 var useDeepCompare = require('use-deep-compare');
 var notifications = require('@mantine/notifications');
 var md = require('react-icons/md');
+var fa = require('react-icons/fa');
 var io5 = require('react-icons/io5');
 var bs = require('react-icons/bs');
 var lodash = require('lodash');
@@ -2427,11 +2428,239 @@ const SettingsPanel = ({ showKernels, expanded, setExpanded, width = 380 })=>{
     });
 };
 
+const PaymentNumberToString = (x, undefinedValue = 'N/A', precision = 2)=>{
+    if (typeof x !== 'number' || Number.isNaN(x)) return undefinedValue;
+    return x.toFixed(precision);
+};
+const isNoPayModelError = (error)=>{
+    return 'status' in error && error.status === 'PARSING_ERROR' && error.originalStatus === 404;
+};
+const NoPayModel = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(core.Group, {
+        className: "p-2 border-1 border-l-0 border-r-0 border-base-lighter w-full h-16",
+        justify: "space-between",
+        children: /*#__PURE__*/ jsxRuntime.jsx(core.Text, {
+            className: "pl-4",
+            size: "md",
+            classNames: {
+                root: 'font-heading text-utility-warning'
+            },
+            children: "No pay model defined"
+        })
+    });
+};
+const CostTracker = ({ workspaceAccountManagerTarget = '' })=>{
+    const { data, isLoading, isFetching, isError, error } = core$1.useGetWorkspacePayModelsQuery(undefined, {
+        pollingInterval: 120000,
+        refetchOnMountOrArgChange: true
+    });
+    const [setWorkspacePayModel] = core$1.useSetCurrentPayModelMutation();
+    const [selectedPayModel, setSelectedPayModel] = React.useState(null);
+    const [opened, setOpened] = React.useState(false);
+    useDeepCompare.useDeepCompareCallback((id)=>{
+        void setWorkspacePayModel(id); // triggers the call to the service to select the pay model
+        setSelectedPayModel(id); // set the paymodel value for the select component
+    }, [
+        setWorkspacePayModel,
+        selectedPayModel
+    ]);
+    const { usersPayModels, workspaceName, hardLimit, totalUsage } = useDeepCompare.useDeepCompareMemo(()=>{
+        if (!data) return {
+            usersPayModels: [],
+            selectedPayModel: [],
+            workspaceName: 'Not Set',
+            totalUsage: undefined,
+            hardLimit: undefined
+        };
+        const usersPayModels = data.allPayModels.map((payModel)=>{
+            return {
+                value: payModel.bmh_workspace_id ?? payModel.workspace_type,
+                label: payModel.workspace_type,
+                totalUsage: payModel['total-usage'],
+                currentPayModel: payModel['current_pay_model'],
+                icon: payModel.request_status === 'active' ? /*#__PURE__*/ jsxRuntime.jsx(fa.FaUser, {}) : /*#__PURE__*/ jsxRuntime.jsx(fa.FaExclamationCircle, {})
+            };
+        });
+        setSelectedPayModel(data.currentPayModel.bmh_workspace_id ?? data.currentPayModel.workspace_type);
+        return {
+            usersPayModels,
+            workspaceName: data.currentPayModel.bmh_workspace_id.length > 0 ? data.currentPayModel.bmh_workspace_id : data.currentPayModel.workspace_type,
+            totalUsage: data.currentPayModel['total-usage'],
+            hardLimit: data.currentPayModel['hard-limit']
+        };
+    }, [
+        data
+    ]);
+    if (isLoading && isFetching) return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "flex justify-center p-2 border-1 border-l-0 border-r-0 border-base-lighter w-full h-14",
+        children: /*#__PURE__*/ jsxRuntime.jsx(core.Loader, {})
+    });
+    if (isError) {
+        if (isNoPayModelError(error)) {
+            return /*#__PURE__*/ jsxRuntime.jsx(NoPayModel, {});
+        } else return /*#__PURE__*/ jsxRuntime.jsx(core.Center, {
+            children: "Unable to get Payment information"
+        });
+    }
+    const ProgressBar = (className = '')=>/*#__PURE__*/ jsxRuntime.jsx(core.Progress, {
+            size: "sm",
+            radius: "xl",
+            "aria-label": "Monthly Workflow Limit",
+            value: !hardLimit ? 100 : hardLimit / totalUsage * 100,
+            color: !hardLimit || totalUsage >= hardLimit ? 'red.5' : 'green.1',
+            className: className
+        });
+    return /*#__PURE__*/ jsxRuntime.jsxs(core.Popover, {
+        width: "target",
+        position: "bottom",
+        shadow: "lg",
+        trapFocus: true,
+        opened: opened,
+        onChange: setOpened,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core.Popover.Target, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core.Button, {
+                    onClick: ()=>setOpened((o)=>!o),
+                    size: "xs",
+                    radius: "xl",
+                    variant: "default",
+                    className: "h-[--badge-height]",
+                    rightSection: /*#__PURE__*/ jsxRuntime.jsx(md.MdExpandMore, {
+                        className: "text-accent",
+                        size: "1.5em",
+                        "aria-label": opened ? 'close' : 'open',
+                        style: {
+                            transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
+                            transition: 'transform 200ms ease'
+                        }
+                    }),
+                    children: [
+                        ProgressBar('w-[110px]'),
+                        /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                            className: "font-black pl-3 pr-2",
+                            children: [
+                                "$",
+                                PaymentNumberToString(totalUsage)
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                            className: "font-normal",
+                            children: [
+                                "/$",
+                                PaymentNumberToString(hardLimit)
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core.Popover.Dropdown, {
+                className: "px-2",
+                children: [
+                    workspaceAccountManagerTarget && /*#__PURE__*/ jsxRuntime.jsx(core.Button, {
+                        component: "a",
+                        href: workspaceAccountManagerTarget,
+                        target: "_blank",
+                        variant: "outline",
+                        leftSection: /*#__PURE__*/ jsxRuntime.jsx(md.MdOpenInNew, {
+                            size: "1.1em",
+                            "aria-label": "external"
+                        }),
+                        size: "xs",
+                        className: "w-full mb-4",
+                        children: "Workspace Account Manager"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(core.Text, {
+                        size: "sm",
+                        className: "uppercase pb-2 px-2",
+                        children: [
+                            "Limit ",
+                            /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                className: "font-black pl-1",
+                                children: [
+                                    "$",
+                                    PaymentNumberToString(hardLimit)
+                                ]
+                            })
+                        ]
+                    }),
+                    ProgressBar('mx-2'),
+                    /*#__PURE__*/ jsxRuntime.jsx(core.Divider, {
+                        my: "sm"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core.Text, {
+                        size: "sm",
+                        className: "uppercase pb-2 px-2",
+                        children: "Account & Charges"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core.Accordion, {
+                        variant: "unstyled",
+                        classNames: {
+                            root: '',
+                            control: 'p-0 px-2',
+                            label: 'p-0',
+                            chevron: 'text-accent',
+                            panel: 'p-0',
+                            content: 'p-0'
+                        },
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(core.Accordion.Item, {
+                            value: "accountInformation",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(core.Accordion.Control, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsxs(core.Text, {
+                                        size: "sm",
+                                        className: "font-black",
+                                        children: [
+                                            workspaceName,
+                                            " - $",
+                                            PaymentNumberToString(totalUsage)
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(core.Accordion.Panel, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(core.Radio.Group, {
+                                        className: "pt-2",
+                                        children: usersPayModels.map((obj)=>/*#__PURE__*/ jsxRuntime.jsx(core.Radio.Card, {
+                                                checked: obj.currentPayModel,
+                                                disabled: true,
+                                                className: "p-2 border-none data-checked:bg-primary-lightest data-checked:border-primary-darker data-checked:font-black hover:bg-primary-max ",
+                                                children: /*#__PURE__*/ jsxRuntime.jsxs(core.Group, {
+                                                    wrap: "nowrap",
+                                                    align: "flex-start",
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsx(core.Text, {
+                                                            size: "sm",
+                                                            className: "grow",
+                                                            children: obj.label
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsxs(core.Text, {
+                                                            size: "sm",
+                                                            children: [
+                                                                "$",
+                                                                PaymentNumberToString(obj.totalUsage)
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(core.Radio.Indicator, {
+                                                            color: "accent"
+                                                        })
+                                                    ]
+                                                })
+                                            }, obj.value))
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
 const WorkspaceToolbar = /*#__PURE__*/ React.forwardRef(({ toolbarConfiguration }, ref)=>{
     const workspaceTier = core$1.useCoreSelector((state)=>core$1.selectWorkspaceTier(state));
     const workspaceStatus = core$1.useCoreSelector((state)=>core$1.selectJEGActiveWorkspaceStatus(state));
     const isFullscreen = core$1.useCoreSelector((state)=>core$1.selectWorkspaceFullscreen(state));
-    const { showStatus, showStop, tierLabel } = toolbarConfiguration || {};
+    const { showStatus, showStop, tierLabel, requirePayModel, workspaceAccountManagerTarget } = toolbarConfiguration || {};
     const coreDispatch = core$1.useCoreDispatch();
     const toggleFullscreen = React.useCallback(()=>{
         coreDispatch(core$1.setWorkspaceFullscreen(!isFullscreen));
@@ -2486,6 +2715,9 @@ const WorkspaceToolbar = /*#__PURE__*/ React.forwardRef(({ toolbarConfiguration
                                     /*#__PURE__*/ jsxRuntime.jsx(core.Badge, {
                                         "aria-label": `Workspace tier: ${tierLabel ?? workspaceTier}`,
                                         children: tierLabel ?? workspaceTier
+                                    }),
+                                    requirePayModel && /*#__PURE__*/ jsxRuntime.jsx(CostTracker, {
+                                        workspaceAccountManagerTarget: workspaceAccountManagerTarget
                                     })
                                 ]
                             })