Refactor permission check redirect (#2109)

<!--
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-3916

Author: alexandrudanpop

packages/react-ui/src/app/common/hooks/authorization-hooks.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { authenticationSession } from '@/app/lib/authentication-session';
 import { Permission } from '@openops/shared';
@@ -12,3 +13,17 @@ export const useAuthorization = () => {
 
   return { checkAccess, role };
 };
+
+export const useCheckAccessAndRedirect = (permission: Permission) => {
+  const { checkAccess } = useAuthorization();
+  const navigate = useNavigate();
+  const hasAccess = checkAccess(permission);
+
+  useEffect(() => {
+    if (!hasAccess) {
+      navigate('/', { replace: true });
+    }
+  }, [hasAccess, navigate]);
+
+  return hasAccess;
+};

packages/react-ui/src/app/features/home/components/home-onboarding-view.tsx

@@ -112,7 +112,9 @@ const HomeOnboardingView = ({
   return (
     <div className="flex flex-col gap-6 flex-1">
       {isFinOpsBenchmarkEnabled && (
-        <PermissionGuard permission={Permission.WRITE_FLOW}>
+        <PermissionGuard
+          permission={[Permission.WRITE_FLOW, Permission.READ_APP_CONNECTION]}
+        >
           <FinOpsBenchmarkBanner
             variation={benchmarkVariation}
             provider={benchmarkProvider}

packages/react-ui/src/app/features/home/components/home-operational-view.tsx

@@ -103,7 +103,9 @@ const HomeOperationalView = ({
       )}
 
       {isFinOpsBenchmarkEnabled && (
-        <PermissionGuard permission={Permission.WRITE_FLOW}>
+        <PermissionGuard
+          permission={[Permission.WRITE_FLOW, Permission.READ_APP_CONNECTION]}
+        >
           <FinOpsBenchmarkBanner
             variation={benchmarkVariation}
             provider={benchmarkProvider}

packages/react-ui/src/app/routes/flows/id/index.tsx

@@ -1,9 +1,10 @@
-import { PopulatedFlow } from '@openops/shared';
+import { Permission, PopulatedFlow } from '@openops/shared';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { Navigate, useParams, useSearchParams } from 'react-router-dom';
 
 import { FullPageSpinner } from '@/app/common/components/full-page-spinner';
+import { useCheckAccessAndRedirect } from '@/app/common/hooks/authorization-hooks';
 import { QueryKeys } from '@/app/constants/query-keys';
 import { SEARCH_PARAMS } from '@/app/constants/search-params';
 import { BuilderPage } from '@/app/features/builder';
@@ -15,6 +16,7 @@ import { flowsApi } from '@/app/features/flows/lib/flows-api';
 import { AxiosError } from 'axios';
 
 const FlowBuilderPage = () => {
+  const hasAccess = useCheckAccessAndRedirect(Permission.READ_FLOW);
   const { flowId } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -51,6 +53,10 @@ const FlowBuilderPage = () => {
     refetchOnWindowFocus: 'always',
   });
 
+  if (!hasAccess) {
+    return null;
+  }
+
   if (isError && (error as AxiosError).status === 404) {
     return <Navigate to="/404" />;
   }

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

@@ -7,6 +7,7 @@ import qs from 'qs';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
+import { useCheckAccessAndRedirect } from '@/app/common/hooks/authorization-hooks';
 import { useDefaultSidebarState } from '@/app/common/hooks/use-default-sidebar-state';
 import { isModifierOrMiddleClick } from '@/app/common/navigation/table-navigation-helper';
 import {
@@ -16,10 +17,11 @@ import {
 import { flowsApi } from '@/app/features/flows/lib/flows-api';
 import { FlowsFolderBreadcrumbsManager } from '@/app/features/folders/component/folder-breadcrumbs-manager';
 import { FLOWS_TABLE_FILTERS } from '@/app/features/folders/lib/flows-table-filters';
-import { FlowStatus, FlowVersionState } from '@openops/shared';
+import { FlowStatus, FlowVersionState, Permission } from '@openops/shared';
 
 const FlowsPage = () => {
   useDefaultSidebarState('expanded');
+  const hasAccess = useCheckAccessAndRedirect(Permission.READ_FLOW);
   const navigate = useNavigate();
   const [tableRefresh, setTableRefresh] = useState(false);
   const onTableRefresh = useCallback(
@@ -58,6 +60,10 @@ const FlowsPage = () => {
     [],
   );
 
+  if (!hasAccess) {
+    return null;
+  }
+
   return (
     <div className="flex flex-col w-full">
       <div className="px-7">

packages/react-ui/src/app/routes/openops-analytics/index.tsx

@@ -1,6 +1,5 @@
-import { Navigate } from 'react-router-dom';
+import { useCheckAccessAndRedirect } from '@/app/common/hooks/authorization-hooks';
 
-import { useAuthorization } from '@/app/common/hooks/authorization-hooks';
 import { flagsHooks } from '@/app/common/hooks/flags-hooks';
 import { useDefaultSidebarState } from '@/app/common/hooks/use-default-sidebar-state';
 import { useCandu } from '@/app/features/extensions/candu/use-candu';
@@ -17,7 +16,7 @@ import { useEmbedDashboard } from './use-embed-dashboard';
 
 const OpenOpsAnalyticsPage = () => {
   useDefaultSidebarState('minimized');
-  const { checkAccess } = useAuthorization();
+  useCheckAccessAndRedirect(Permission.WRITE_ANALYTICS);
   const { isCanduEnabled, canduClientToken, canduUserId } = useCandu();
   const { data: analyticsPublicUrl } = flagsHooks.useFlag<string | undefined>(
     FlagId.ANALYTICS_PUBLIC_URL,
@@ -39,10 +38,6 @@ const OpenOpsAnalyticsPage = () => {
     canduUserId,
   });
 
-  if (!checkAccess(Permission.WRITE_ANALYTICS)) {
-    return <Navigate to="/" replace />;
-  }
-
   if (!analyticsPublicUrl) {
     console.error('OpenOps Analytics URL is not defined');
     return null;

packages/react-ui/src/app/routes/openops-tables/index.tsx

@@ -1,15 +1,15 @@
 import { t } from 'i18next';
-import { Navigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
-import { useAuthorization } from '@/app/common/hooks/authorization-hooks';
+import { useCheckAccessAndRedirect } from '@/app/common/hooks/authorization-hooks';
 import { flagsHooks } from '@/app/common/hooks/flags-hooks';
 import { useDefaultSidebarState } from '@/app/common/hooks/use-default-sidebar-state';
 import { useCandu } from '@/app/features/extensions/candu/use-candu';
 import { FlagId, Permission } from '@openops/shared';
 
 const OpenOpsTablesPage = () => {
   useDefaultSidebarState('minimized');
-  const { checkAccess } = useAuthorization();
+  useCheckAccessAndRedirect(Permission.WRITE_TABLE);
   const { isCanduEnabled, canduClientToken, canduUserId } = useCandu();
   const parentData = encodeURIComponent(
     JSON.stringify({ isCanduEnabled, userId: canduUserId, canduClientToken }),
@@ -24,10 +24,6 @@ const OpenOpsTablesPage = () => {
     FlagId.OPENOPS_TABLES_PUBLIC_URL,
   );
 
-  if (!checkAccess(Permission.WRITE_TABLE)) {
-    return <Navigate to="/" replace />;
-  }
-
   if (!openopsTablesUrl) {
     console.error('OpenOps Tables URL is not defined');
     return null;