Refactor permission check redirect

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/templates/components/select-flow-template-dialog-content.tsx

@@ -1,4 +1,4 @@
-import { useAuthorization } from '@/app/common/hooks/authorization-hooks';
+import { useCheckAccessAndRedirect } from '@/app/common/hooks/authorization-hooks';
 import { useTheme } from '@/app/common/providers/theme-provider';
 import { OPENOPS_CONNECT_TEMPLATES_URL } from '@/app/constants/cloud';
 import { ExpandedTemplate } from '@/app/features/templates/components/expanded-template';
@@ -97,8 +97,9 @@ const SelectFlowTemplateDialogContent = ({
   const ownerLogoUrl = useOwnerLogoUrl();
   const { createPollingInterval } = useUserInfoPolling();
   const { isCloudUser } = useShowTemplatesBanner();
-  const { checkAccess } = useAuthorization();
-  const hasWriteFlowPermission = checkAccess(Permission.WRITE_FLOW);
+  const hasWriteFlowPermission = useCheckAccessAndRedirect(
+    Permission.WRITE_FLOW,
+  );
   const isFullCatalog = !isTemplatePreselected && isCloudUser;
 
   const onExploreMoreClick = () => {

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,4 @@
-import { Navigate } 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';
@@ -17,7 +15,7 @@ import { useEmbedDashboard } from './use-embed-dashboard';
 
 const OpenOpsAnalyticsPage = () => {
   useDefaultSidebarState('minimized');
-  const { checkAccess } = useAuthorization();
+  const hasAccess = useCheckAccessAndRedirect(Permission.WRITE_ANALYTICS);
   const { isCanduEnabled, canduClientToken, canduUserId } = useCandu();
   const { data: analyticsPublicUrl } = flagsHooks.useFlag<string | undefined>(
     FlagId.ANALYTICS_PUBLIC_URL,
@@ -39,8 +37,8 @@ const OpenOpsAnalyticsPage = () => {
     canduUserId,
   });
 
-  if (!checkAccess(Permission.WRITE_ANALYTICS)) {
-    return <Navigate to="/" replace />;
+  if (!hasAccess) {
+    return null;
   }
 
   if (!analyticsPublicUrl) {

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();
+  const hasAccess = useCheckAccessAndRedirect(Permission.WRITE_TABLE);
   const { isCanduEnabled, canduClientToken, canduUserId } = useCandu();
   const parentData = encodeURIComponent(
     JSON.stringify({ isCanduEnabled, userId: canduUserId, canduClientToken }),
@@ -24,8 +24,8 @@ const OpenOpsTablesPage = () => {
     FlagId.OPENOPS_TABLES_PUBLIC_URL,
   );
 
-  if (!checkAccess(Permission.WRITE_TABLE)) {
-    return <Navigate to="/" replace />;
+  if (!hasAccess) {
+    return null;
   }
 
   if (!openopsTablesUrl) {