fix: disable add connection button for unauthorized users

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 (
     <React.Fragment>
       <ButtonGroup
@@ -42,6 +48,7 @@ export default function SplitButton(props) {
             borderRadius: 0,
             borderRight: '1px solid #bdbdbd',
           }}
+          disabled={selectedOption.disabled}
         >
           {selectedOption.label}
         </Button>
@@ -80,6 +87,7 @@ export default function SplitButton(props) {
                         selected={index === defaultActionIndex}
                         component={Link}
                         to={option.to}
+                        disabled={option.disabled}
                       >
                         {option.label}
                       </MenuItem>
@@ -94,3 +102,17 @@ export default function SplitButton(props) {
     </React.Fragment>
   );
 }
+
+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,
+};

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={
                     <SplitButton
                       disabled={
-                        appConfig?.data &&
-                        !appConfig?.data?.canConnect &&
-                        !appConfig?.data?.canCustomConnect
+                        (appConfig?.data &&
+                          !appConfig?.data?.canConnect &&
+                          !appConfig?.data?.canCustomConnect) ||
+                        connectionOptions.every(({ disabled }) => disabled)
                       }
                       options={connectionOptions}
                     />