Add permission handling for connections page (#2075)

<!--
Ensure the title clearly reflects what was changed.
Provide a clear and concise description of the changes made. The PR
should only contain the changes related to the issue, and no other
unrelated changes.
-->

Fixes OPS-3681

Author: alexandrudanpop

packages/react-ui/src/app/features/connections/components/connection-table.tsx

@@ -1,17 +1,15 @@
-import { useAuthorization } from '@/app/common/hooks/authorization-hooks';
+import { PermissionGuard } from '@/app/common/components/permission-guard';
 import { appConnectionsApi } from '@/app/features/connections/lib/app-connections-api';
 import { handleMutationError } from '@/app/interceptors/interceptor-utils';
 import { formatUtils } from '@/app/lib/utils';
 import {
   BlockIcon,
-  Button,
   DataTable,
   DataTableColumnHeader,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  PageHeader,
   PaginationParams,
   RowDataWithActions,
   StatusIconWithText,
@@ -35,7 +33,6 @@ import { appConnectionsHooks } from '../lib/app-connections-hooks';
 import { useConnectionsContext } from './connections-context';
 import { DeleteConnectionDialog } from './delete-connection-dialog';
 import { EditConnectionDialog } from './edit-connection-dialog';
-import { NewConnectionTypeDialog } from './new-connection-type-dialog';
 
 type BlockIconWithBlockNameProps = {
   authProviderKey: string;
@@ -107,38 +104,48 @@ const MenuConnectionColumn = ({
           <EllipsisVertical className="h-10 w-10" />
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-[155px]">
-          <DropdownMenuItem
-            key="edit"
-            onSelect={(e) => {
-              e.preventDefault();
-              setIsEditConnectionDialog(true);
-            }}
+          <PermissionGuard
+            permission={Permission.WRITE_APP_CONNECTION}
+            tooltipClassName="flex"
           >
-            <span className="text-black text-sm font-medium cursor-pointer w-full">
-              {t('Edit')}
-            </span>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            key="delete"
-            onSelect={(e) => {
-              e.preventDefault();
-            }}
+            <DropdownMenuItem
+              key="edit"
+              onSelect={(e) => {
+                e.preventDefault();
+                setIsEditConnectionDialog(true);
+              }}
+            >
+              <span className="text-black text-sm font-medium cursor-pointer w-full">
+                {t('Edit')}
+              </span>
+            </DropdownMenuItem>
+          </PermissionGuard>
+          <PermissionGuard
+            permission={Permission.DELETE_APP_CONNECTION}
+            tooltipClassName="flex"
           >
-            <DeleteConnectionDialog
-              connectionName={row.name}
-              mutationFn={deleteConnectionMutation}
-              isPending={isPending}
-              linkedFlows={linkedFlows}
+            <DropdownMenuItem
+              key="delete"
+              onSelect={(e) => {
+                e.preventDefault();
+              }}
             >
-              <button
-                onClick={() => mutate({ connectionName: row.name })}
-                className="text-black text-sm font-medium bg-transparent border-none p-0 m-0 cursor-pointer appearance-none w-full text-left"
-                type="button"
+              <DeleteConnectionDialog
+                connectionName={row.name}
+                mutationFn={deleteConnectionMutation}
+                isPending={isPending}
+                linkedFlows={linkedFlows}
               >
-                {t('Delete')}
-              </button>
-            </DeleteConnectionDialog>
-          </DropdownMenuItem>
+                <button
+                  onClick={() => mutate({ connectionName: row.name })}
+                  className="text-black text-sm font-medium bg-transparent border-none p-0 m-0 cursor-pointer appearance-none w-full text-left"
+                  type="button"
+                >
+                  {t('Delete')}
+                </button>
+              </DeleteConnectionDialog>
+            </DropdownMenuItem>
+          </PermissionGuard>
         </DropdownMenuContent>
       </DropdownMenu>
       {isEditConnectionDialog && (
@@ -260,32 +267,6 @@ const fetchData = async (
   });
 };
 
-const ConnectionsHeader = () => {
-  const { checkAccess } = useAuthorization();
-  const userHasPermissionToWriteAppConnection = checkAccess(
-    Permission.WRITE_APP_CONNECTION,
-  );
-
-  const { setRefresh } = useConnectionsContext();
-
-  return (
-    <PageHeader title={t('Connections')}>
-      <div className="ml-auto mr-7">
-        <NewConnectionTypeDialog
-          onConnectionCreated={() => setRefresh((prev) => !prev)}
-        >
-          <Button
-            variant="default"
-            disabled={!userHasPermissionToWriteAppConnection}
-          >
-            {t('New Connection')}
-          </Button>
-        </NewConnectionTypeDialog>
-      </div>
-    </PageHeader>
-  );
-};
-
 function AppConnectionsTable() {
   const { refresh, setRefresh } = useConnectionsContext();
 
@@ -303,4 +284,4 @@ function AppConnectionsTable() {
   );
 }
 
-export { AppConnectionsTable, ConnectionsHeader };
+export { AppConnectionsTable };

packages/react-ui/src/app/router.tsx

@@ -27,13 +27,12 @@ import {
   OpsErrorBoundary,
   RouteErrorBoundary,
 } from './common/error-boundaries/ops-error-boundary';
-import { ConnectionsHeader } from './features/connections/components/connection-table';
 import { ConnectionsProvider } from './features/connections/components/connections-context';
 import { GlobalLayout } from './features/navigation/layout/global-layout';
 import { RouteWrapper } from './features/navigation/layout/route-wrapper';
 import NotFoundPage from './routes/404-page';
 import { ChangePasswordPage } from './routes/change-password';
-import AppConnectionsPage from './routes/connections';
+import AppConnectionsPage, { ConnectionsHeader } from './routes/connections';
 import { FlowBuilderPage } from './routes/flows/id';
 import { ResetPasswordPage } from './routes/forget-password';
 import { HomePage } from './routes/home';

packages/react-ui/src/app/routes/connections/index.tsx

@@ -1,17 +1,29 @@
+import { PermissionGuard } from '@/app/common/components/permission-guard';
 import { AppConnectionsTable } from '@/app/features/connections/components/connection-table';
+import { useConnectionsContext } from '@/app/features/connections/components/connections-context';
 import { NewConnectionTypeDialog } from '@/app/features/connections/components/new-connection-type-dialog';
-import { useState } from 'react';
+import { Button, PageHeader } from '@openops/components/ui';
+import { Permission } from '@openops/shared';
+import { t } from 'i18next';
 
-export default function AppConnectionsPage() {
-  const [openNewConnectionDialog, setOpenNewConnectionDialog] = useState(false);
+export const ConnectionsHeader = () => {
+  const { setRefresh } = useConnectionsContext();
 
   return (
-    <>
-      <NewConnectionTypeDialog
-        open={openNewConnectionDialog}
-        setOpen={setOpenNewConnectionDialog}
-      ></NewConnectionTypeDialog>
-      <AppConnectionsTable></AppConnectionsTable>
-    </>
+    <PageHeader title={t('Connections')}>
+      <div className="ml-auto mr-7">
+        <NewConnectionTypeDialog
+          onConnectionCreated={() => setRefresh((prev) => !prev)}
+        >
+          <PermissionGuard permission={Permission.WRITE_APP_CONNECTION}>
+            <Button variant="default">{t('New Connection')}</Button>
+          </PermissionGuard>
+        </NewConnectionTypeDialog>
+      </div>
+    </PageHeader>
   );
+};
+
+export default function AppConnectionsPage() {
+  return <AppConnectionsTable />;
 }