diff --git a/packages/web/src/components/SplitButton/index.jsx b/packages/web/src/components/SplitButton/index.jsx
index 7fa11a288b..ff26323c53 100644
--- a/packages/web/src/components/SplitButton/index.jsx
+++ b/packages/web/src/components/SplitButton/index.jsx
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
@@ -9,21 +10,26 @@ import Paper from '@mui/material/Paper';
import Popper from '@mui/material/Popper';
import * as React from 'react';
import { Link } from 'react-router-dom';
+
export default function SplitButton(props) {
const { options, disabled, defaultActionIndex = 0 } = props;
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
+
const multiOptions = options.length > 1;
const selectedOption = options[defaultActionIndex];
+
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
+
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
+
return (
{selectedOption.label}
@@ -80,6 +87,7 @@ export default function SplitButton(props) {
selected={index === defaultActionIndex}
component={Link}
to={option.to}
+ disabled={option.disabled}
>
{option.label}
@@ -94,3 +102,17 @@ export default function SplitButton(props) {
);
}
+
+SplitButton.propTypes = {
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ label: PropTypes.string.isRequired,
+ key: PropTypes.string.isRequired,
+ 'data-test': PropTypes.string.isRequired,
+ to: PropTypes.string.isRequired,
+ disabled: PropTypes.bool.isRequired,
+ }).isRequired,
+ ).isRequired,
+ disabled: PropTypes.bool,
+ defaultActionIndex: PropTypes.number,
+};
diff --git a/packages/web/src/pages/Application/index.jsx b/packages/web/src/pages/Application/index.jsx
index 239df2de33..3692358c63 100644
--- a/packages/web/src/pages/Application/index.jsx
+++ b/packages/web/src/pages/Application/index.jsx
@@ -19,6 +19,7 @@ import AddIcon from '@mui/icons-material/Add';
import useFormatMessage from 'hooks/useFormatMessage';
import useAppConfig from 'hooks/useAppConfig.ee';
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
import * as URLS from 'config/urls';
import SplitButton from 'components/SplitButton';
import ConditionalIconButton from 'components/ConditionalIconButton';
@@ -62,6 +63,8 @@ export default function Application() {
const { data: appConfig } = useAppConfig(appKey);
const connectionId = searchParams.get('connectionId') || undefined;
+ const currentUserAbility = useCurrentUserAbility();
+
const goToApplicationPage = () => navigate('connections');
const connectionOptions = React.useMemo(() => {
@@ -74,6 +77,7 @@ export default function Application() {
key: 'addConnection',
'data-test': 'add-connection-button',
to: URLS.APP_ADD_CONNECTION(appKey, appConfig?.data?.canConnect),
+ disabled: !currentUserAbility.can('create', 'Connection'),
},
];
@@ -83,11 +87,12 @@ export default function Application() {
key: 'addCustomConnection',
'data-test': 'add-custom-connection-button',
to: URLS.APP_ADD_CONNECTION(appKey),
+ disabled: !currentUserAbility.can('create', 'Connection'),
});
}
return options;
- }, [appKey, appConfig?.data]);
+ }, [appKey, appConfig?.data, currentUserAbility]);
if (loading) return null;
@@ -136,9 +141,10 @@ export default function Application() {
element={
disabled)
}
options={connectionOptions}
/>