Merge pull request #1578 from automatisch/AUT-620

feat: improve UI display depending on user permissions

packages/web/src/components/AppConnectionContextMenu/index.jsx

@@ -8,6 +8,7 @@ import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { ConnectionPropType } from 'propTypes/propTypes';
 import { useQueryClient } from '@tanstack/react-query';
+import Can from 'components/Can';
 
 function ContextMenu(props) {
   const {
@@ -44,21 +45,35 @@ function ContextMenu(props) {
       hideBackdrop={false}
       anchorEl={anchorEl}
     >
+      <Can I="read" a="Flow" passThrough>
+        {(allowed) => (
           <MenuItem
             component={Link}
             to={URLS.APP_FLOWS_FOR_CONNECTION(appKey, connection.id)}
             onClick={createActionHandler({ type: 'viewFlows' })}
+            disabled={!allowed}
           >
             {formatMessage('connection.viewFlows')}
           </MenuItem>
+        )}
+      </Can>
 
-      <MenuItem onClick={createActionHandler({ type: 'test' })}>
+      <Can I="update" a="Connection" passThrough>
+        {(allowed) => (
+          <MenuItem
+            onClick={createActionHandler({ type: 'test' })}
+            disabled={!allowed}
+          >
             {formatMessage('connection.testConnection')}
           </MenuItem>
+        )}
+      </Can>
 
+      <Can I="create" a="Connection" passThrough>
+        {(allowed) => (
           <MenuItem
             component={Link}
-        disabled={disableReconnection}
+            disabled={!allowed || disableReconnection}
             to={URLS.APP_RECONNECT_CONNECTION(
               appKey,
               connection.id,
@@ -68,10 +83,19 @@ function ContextMenu(props) {
           >
             {formatMessage('connection.reconnect')}
           </MenuItem>
+        )}
+      </Can>
 
-      <MenuItem onClick={createActionHandler({ type: 'delete' })}>
+      <Can I="delete" a="Connection" passThrough>
+        {(allowed) => (
+          <MenuItem
+            onClick={createActionHandler({ type: 'delete' })}
+            disabled={!allowed}
+          >
             {formatMessage('connection.delete')}
           </MenuItem>
+        )}
+      </Can>
     </Menu>
   );
 }

packages/web/src/components/AppConnections/index.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import AppConnectionRow from 'components/AppConnectionRow';
 import NoResultFound from 'components/NoResultFound';
+import Can from 'components/Can';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
 import useAppConnections from 'hooks/useAppConnections';
@@ -16,11 +17,15 @@ function AppConnections(props) {
 
   if (!hasConnections) {
     return (
+      <Can I="create" a="Connection" passThrough>
+        {(allowed) => (
           <NoResultFound
-        to={URLS.APP_ADD_CONNECTION(appKey)}
             text={formatMessage('app.noConnections')}
             data-test="connections-no-results"
+            {...(allowed && { to: URLS.APP_ADD_CONNECTION(appKey) })}
           />
+        )}
+      </Can>
     );
   }
 

packages/web/src/components/AppFlows/index.jsx

@@ -5,6 +5,7 @@ import PaginationItem from '@mui/material/PaginationItem';
 
 import * as URLS from 'config/urls';
 import AppFlowRow from 'components/FlowRow';
+import Can from 'components/Can';
 import NoResultFound from 'components/NoResultFound';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useConnectionFlows from 'hooks/useConnectionFlows';
@@ -36,11 +37,20 @@ function AppFlows(props) {
 
   if (!hasFlows) {
     return (
+      <Can I="create" a="Flow" passThrough>
+        {(allowed) => (
           <NoResultFound
-        to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(appKey, connectionId)}
             text={formatMessage('app.noFlows')}
             data-test="flows-no-results"
+            {...(allowed && {
+              to: URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
+                appKey,
+                connectionId
+              ),
+            })}
           />
+        )}
+      </Can>
     );
   }
 

packages/web/src/pages/Application/index.jsx

@@ -30,6 +30,7 @@ import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
 import useApp from 'hooks/useApp';
+import Can from 'components/Can';
 
 const ReconnectConnection = (props) => {
   const { application, onClose } = props;
@@ -92,7 +93,7 @@ export default function Application() {
     }
 
     return options;
-  }, [appKey, appConfig?.data, currentUserAbility]);
+  }, [appKey, appConfig?.data, currentUserAbility, formatMessage]);
 
   if (loading) return null;
 
@@ -118,6 +119,8 @@ export default function Application() {
                 <Route
                   path={`${URLS.FLOWS}/*`}
                   element={
+                    <Can I="create" a="Flow" passThrough>
+                      {(allowed) => (
                         <ConditionalIconButton
                           type="submit"
                           variant="contained"
@@ -130,18 +133,23 @@ export default function Application() {
                           )}
                           fullWidth
                           icon={<AddIcon />}
-                      disabled={!currentUserAbility.can('create', 'Flow')}
+                          disabled={!allowed}
                         >
                           {formatMessage('app.createFlow')}
                         </ConditionalIconButton>
+                      )}
+                    </Can>
                   }
                 />
 
                 <Route
                   path={`${URLS.CONNECTIONS}/*`}
                   element={
+                    <Can I="create" a="Connection" passThrough>
+                      {(allowed) => (
                         <SplitButton
                           disabled={
+                            !allowed ||
                             (appConfig?.data &&
                               !appConfig?.data?.canConnect &&
                               !appConfig?.data?.canCustomConnect) ||
@@ -149,6 +157,8 @@ export default function Application() {
                           }
                           options={connectionOptions}
                         />
+                      )}
+                    </Can>
                   }
                 />
               </Routes>
@@ -169,17 +179,20 @@ export default function Application() {
                     label={formatMessage('app.connections')}
                     to={URLS.APP_CONNECTIONS(appKey)}
                     value={URLS.APP_CONNECTIONS_PATTERN}
-                    disabled={!app.supportsConnections}
+                    disabled={
+                      !currentUserAbility.can('read', 'Connection') ||
+                      !app.supportsConnections
+                    }
                     component={Link}
                     data-test="connections-tab"
                   />
-
                   <Tab
                     label={formatMessage('app.flows')}
                     to={URLS.APP_FLOWS(appKey)}
                     value={URLS.APP_FLOWS_PATTERN}
                     component={Link}
                     data-test="flows-tab"
+                    disabled={!currentUserAbility.can('read', 'Flow')}
                   />
                 </Tabs>
               </Box>
@@ -187,14 +200,20 @@ export default function Application() {
               <Routes>
                 <Route
                   path={`${URLS.FLOWS}/*`}
-                  element={<AppFlows appKey={appKey} />}
+                  element={
+                    <Can I="read" a="Flow">
+                      <AppFlows appKey={appKey} />
+                    </Can>
+                  }
                 />
-
                 <Route
                   path={`${URLS.CONNECTIONS}/*`}
-                  element={<AppConnections appKey={appKey} />}
+                  element={
+                    <Can I="read" a="Connection">
+                      <AppConnections appKey={appKey} />
+                    </Can>
+                  }
                 />
-
                 <Route
                   path="/"
                   element={
@@ -218,17 +237,24 @@ export default function Application() {
         <Route
           path="/connections/add"
           element={
-            <AddAppConnection onClose={goToApplicationPage} application={app} />
+            <Can I="create" a="Connection">
+              <AddAppConnection
+                onClose={goToApplicationPage}
+                application={app}
+              />
+            </Can>
           }
         />
 
         <Route
           path="/connections/:connectionId/reconnect"
           element={
+            <Can I="create" a="Connection">
               <ReconnectConnection
                 application={app}
                 onClose={goToApplicationPage}
               />
+            </Can>
           }
         />
       </Routes>

packages/web/src/pages/Applications/index.jsx

@@ -84,11 +84,15 @@ export default function Applications() {
         )}
 
         {!isLoading && !hasApps && (
+          <Can I="create" a="Connection" passThrough>
+            {(allowed) => (
               <NoResultFound
                 text={formatMessage('apps.noConnections')}
-            to={URLS.NEW_APP_CONNECTION}
+                {...(allowed && { to: URLS.NEW_APP_CONNECTION })}
               />
             )}
+          </Can>
+        )}
 
         {!isLoading &&
           apps?.map((app) => (