feat(frontend): Add checking admin permission for components

VitNode · Oct 18, 2024 · 8adb913 · 8adb913
1 parent 04416fe
commit 8adb913
Show file tree

Hide file tree

Showing 15 changed files with 201 additions and 122 deletions.
diff --git a/packages/frontend/src/graphql/get-session-admin-data.tsx b/packages/frontend/src/graphql/get-session-admin-data.tsx
@@ -37,27 +37,33 @@ export interface PermissionSessionAdmin {
   permission: string;
 }
 
-export const checkAdminPermission = async ({
+export const checkAdminPermissionPage = async ({
   plugin_code,
   group,
   permission,
 }: PermissionSessionAdmin) => {
-  const {
-    admin__sessions__authorization: { permissions },
-  } = await getSessionAdminData();
-  if (permissions.length === 0) return;
-  const findPlugin = permissions.find(item => item.plugin_code === plugin_code);
-  const findGroup = findPlugin?.groups.find(item => item.id === group);
-  if (findGroup?.permissions.length === 0) return;
-  const findPermission = findGroup?.permissions.find(
-    item => item === permission,
-  );
-  if (!findPermission) return <ErrorView code="403" />;
+  try {
+    const {
+      admin__sessions__authorization: { permissions },
+    } = await getSessionAdminData();
+    if (permissions.length === 0) return;
+    const findPlugin = permissions.find(
+      item => item.plugin_code === plugin_code,
+    );
+    const findGroup = findPlugin?.groups.find(item => item.id === group);
+    if (findGroup?.permissions.length === 0) return;
+    const findPermission = findGroup?.permissions.find(
+      item => item === permission,
+    );
+    if (!findPermission) return <ErrorView code="403" />;
 
-  return;
+    return;
+  } catch (error) {
+    return <ErrorView code="500" />;
+  }
 };
 
-export const checkAdminPermissionMetadata = async ({
+export const checkAdminPermissionPageMetadata = async ({
   plugin_code,
   group,
   permission,
@@ -82,3 +88,22 @@ export const checkAdminPermissionMetadata = async ({
 
   return {};
 };
+
+export const isInAdminPermission = async ({
+  plugin_code,
+  group,
+  permission,
+}: PermissionSessionAdmin) => {
+  const {
+    admin__sessions__authorization: { permissions },
+  } = await getSessionAdminData();
+  if (permissions.length === 0) return true;
+  const findPlugin = permissions.find(item => item.plugin_code === plugin_code);
+  const findGroup = findPlugin?.groups.find(item => item.id === group);
+  if (findGroup?.permissions.length === 0) return true;
+  const findPermission = findGroup?.permissions.find(
+    item => item === permission,
+  );
+
+  return !!findPermission;
+};
diff --git a/packages/frontend/src/hooks/use-session-admin.ts b/packages/frontend/src/hooks/use-session-admin.ts
@@ -1,7 +1,9 @@
+import { PermissionSessionAdmin } from '@/graphql/get-session-admin-data';
 import { Admin__Sessions__AuthorizationQuery } from '@/graphql/queries/admin/admin__sessions__authorization.generated';
 import React from 'react';
 
 interface Args {
+  isInAdminPermission: (args: PermissionSessionAdmin) => boolean;
   session?: Admin__Sessions__AuthorizationQuery['admin__sessions__authorization']['user'];
   version: string;
 }
@@ -10,6 +12,7 @@ export const SessionAdminContext = React.createContext<Args>({
   session:
     {} as Admin__Sessions__AuthorizationQuery['admin__sessions__authorization']['user'],
   version: '',
+  isInAdminPermission: () => false,
 });
 
 export const useSessionAdmin = () => React.useContext(SessionAdminContext);
diff --git a/packages/frontend/src/views/admin/layout/auth/aside/avatar.tsx b/packages/frontend/src/views/admin/layout/auth/aside/avatar.tsx
@@ -28,7 +28,7 @@ import { mutationApi } from './hooks/mutation-api';
 export const AvatarAsideAuthAdmin = () => {
   const t = useTranslations('admin.global');
   const tCore = useTranslations('core.global');
-  const { session } = useSessionAdmin();
+  const { session, isInAdminPermission } = useSessionAdmin();
 
   if (!session) return null;
   const { email, name, name_seo } = session;
@@ -70,12 +70,18 @@ export const AvatarAsideAuthAdmin = () => {
               <span>{tCore('user-bar.my_profile')}</span>
             </Link>
           </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <Link href="/admin/core/diagnostic">
-              <HammerIcon />
-              <span>{t('diagnostic_tools')}</span>
-            </Link>
-          </DropdownMenuItem>
+          {isInAdminPermission({
+            plugin_code: 'core',
+            group: 'dashboard',
+            permission: 'can_manage_diagnostic_tools',
+          }) && (
+            <DropdownMenuItem asChild>
+              <Link href="/admin/core/diagnostic">
+                <HammerIcon />
+                <span>{t('diagnostic_tools')}</span>
+              </Link>
+            </DropdownMenuItem>
+          )}
         </DropdownMenuGroup>
 
         <DropdownMenuSeparator />

diff --git a/packages/frontend/src/views/admin/layout/providers.tsx b/packages/frontend/src/views/admin/layout/providers.tsx
@@ -1,21 +1,43 @@
 'use client';
 
+import { PermissionSessionAdmin } from '@/graphql/get-session-admin-data';
 import { Admin__Sessions__AuthorizationQuery } from '@/graphql/queries/admin/admin__sessions__authorization.generated';
 
 import { SessionAdminContext } from '../../../hooks/use-session-admin';
 
 export const AdminProviders = ({
   children,
-  data,
+  data: {
+    admin__sessions__authorization: { permissions, user, version },
+  },
 }: {
   children: React.ReactNode;
   data: Admin__Sessions__AuthorizationQuery;
 }) => {
+  const isInAdminPermission = ({
+    plugin_code,
+    group,
+    permission,
+  }: PermissionSessionAdmin) => {
+    if (permissions.length === 0) return true;
+    const findPlugin = permissions.find(
+      item => item.plugin_code === plugin_code,
+    );
+    const findGroup = findPlugin?.groups.find(item => item.id === group);
+    if (findGroup?.permissions.length === 0) return true;
+    const findPermission = findGroup?.permissions.find(
+      item => item === permission,
+    );
+
+    return !!findPermission;
+  };
+
   return (
     <SessionAdminContext.Provider
       value={{
-        session: data.admin__sessions__authorization.user,
-        version: data.admin__sessions__authorization.version,
+        session: user,
+        version: version,
+        isInAdminPermission,
       }}
     >
       {children}

diff --git a/packages/frontend/src/views/admin/views/core/dashboard/dashboard-core-admin-view.tsx b/packages/frontend/src/views/admin/views/core/dashboard/dashboard-core-admin-view.tsx
@@ -1,7 +1,10 @@
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { HeaderContent } from '@/components/ui/header-content';
-import { getSessionAdminData } from '@/graphql/get-session-admin-data';
+import {
+  getSessionAdminData,
+  isInAdminPermission,
+} from '@/graphql/get-session-admin-data';
 import { CONFIG } from '@/helpers/config-with-env';
 import { Link } from '@/navigation';
 import { AlertTriangle, HammerIcon } from 'lucide-react';
@@ -39,12 +42,18 @@ export const DashboardCoreAdminView = async () => {
           </>
         }
       >
-        <Button asChild>
-          <Link href="/admin/core/diagnostic">
-            <HammerIcon />
-            {t('diagnostic_tools')}
-          </Link>
-        </Button>
+        {(await isInAdminPermission({
+          plugin_code: 'core',
+          group: 'dashboard',
+          permission: 'can_manage_diagnostic_tools',
+        })) && (
+          <Button asChild>
+            <Link href="/admin/core/diagnostic">
+              <HammerIcon />
+              {t('diagnostic_tools')}
+            </Link>
+          </Button>
+        )}
       </HeaderContent>
 
       <WarnReqRestartServer />

diff --git a/packages/frontend/src/views/admin/views/core/diagnostic/diagnostic-tools-view.tsx b/packages/frontend/src/views/admin/views/core/diagnostic/diagnostic-tools-view.tsx
@@ -1,22 +1,35 @@
 import { TranslationsProvider } from '@/components/translations-provider';
 import { HeaderContent } from '@/components/ui/header-content';
+import {
+  checkAdminPermissionPage,
+  checkAdminPermissionPageMetadata,
+} from '@/graphql/get-session-admin-data';
 import { Metadata } from 'next';
-import { useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 
 import { WarnReqRestartServer } from '../plugins/warn-req-restart-server';
 import { ActionsDiagnosticTools } from './actions/actions';
 
+const permission = {
+  plugin_code: 'core',
+  group: 'dashboard',
+  permission: 'can_manage_diagnostic_tools',
+};
+
 export const generateMetadataDiagnosticAdmin = async (): Promise<Metadata> => {
+  const perm = await checkAdminPermissionPageMetadata(permission);
+  if (perm) return perm;
   const t = await getTranslations('admin.core.diagnostic');
 
   return {
     title: t('title'),
   };
 };
 
-export const DiagnosticToolsView = () => {
-  const t = useTranslations('admin.core.diagnostic');
+export const DiagnosticToolsView = async () => {
+  const perm = await checkAdminPermissionPage(permission); // [!code highlight]
+  if (perm) return perm;
+  const t = await getTranslations('admin.core.diagnostic');
 
   return (
     <TranslationsProvider namespaces="admin.core.diagnostic">

diff --git a/packages/frontend/src/views/admin/views/core/settings/ai/ai-settings-core-admin-view.tsx b/packages/frontend/src/views/admin/views/core/settings/ai/ai-settings-core-admin-view.tsx
@@ -3,8 +3,8 @@ import { Card } from '@/components/ui/card';
 import { HeaderContent } from '@/components/ui/header-content';
 import { getGlobalData } from '@/graphql/get-global-data';
 import {
-  checkAdminPermission,
-  checkAdminPermissionMetadata,
+  checkAdminPermissionPage,
+  checkAdminPermissionPageMetadata,
 } from '@/graphql/get-session-admin-data';
 import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
@@ -18,7 +18,7 @@ const permission = {
 };
 
 export const generateMetadataAiSettingsAdmin = async (): Promise<Metadata> => {
-  const perm = await checkAdminPermissionMetadata(permission);
+  const perm = await checkAdminPermissionPageMetadata(permission);
   if (perm) return perm;
   const t = await getTranslations('admin.core.settings.ai');
 
@@ -28,7 +28,7 @@ export const generateMetadataAiSettingsAdmin = async (): Promise<Metadata> => {
 };
 
 export const AiSettingsCoreAdminView = async () => {
-  const perm = await checkAdminPermission(permission);
+  const perm = await checkAdminPermissionPage(permission);
   if (perm) return perm;
   const [
     t,

diff --git a/.../views/admin/views/core/settings/authorization/authorization-settings-core-admin-view.tsx b/.../views/admin/views/core/settings/authorization/authorization-settings-core-admin-view.tsx
@@ -4,8 +4,8 @@ import { HeaderContent } from '@/components/ui/header-content';
 import { fetcher } from '@/graphql/fetcher';
 import { getGlobalData } from '@/graphql/get-global-data';
 import {
-  checkAdminPermission,
-  checkAdminPermissionMetadata,
+  checkAdminPermissionPage,
+  checkAdminPermissionPageMetadata,
 } from '@/graphql/get-session-admin-data';
 import {
   Admin__Core_Authorization_Settings__Show,
@@ -33,7 +33,7 @@ const permission = {
 
 export const generateMetadataAuthorizationSettingsAdmin =
   async (): Promise<Metadata> => {
-    const perm = await checkAdminPermissionMetadata(permission);
+    const perm = await checkAdminPermissionPageMetadata(permission);
     if (perm) return perm;
     const t = await getTranslations('admin_core.nav');
 
@@ -43,7 +43,7 @@ export const generateMetadataAuthorizationSettingsAdmin =
   };
 
 export const AuthorizationSettingsCoreAdminView = async () => {
-  const perm = await checkAdminPermission(permission);
+  const perm = await checkAdminPermissionPage(permission);
   if (perm) return perm;
   const [
     t,

diff --git a/packages/frontend/src/views/admin/views/core/settings/email/email-settings-admin-view.tsx b/packages/frontend/src/views/admin/views/core/settings/email/email-settings-admin-view.tsx
@@ -2,8 +2,8 @@ import { Card } from '@/components/ui/card';
 import { HeaderContent } from '@/components/ui/header-content';
 import { fetcher } from '@/graphql/fetcher';
 import {
-  checkAdminPermission,
-  checkAdminPermissionMetadata,
+  checkAdminPermissionPage,
+  checkAdminPermissionPageMetadata,
 } from '@/graphql/get-session-admin-data';
 import {
   Admin__Core_Email_Settings__Show,
@@ -35,7 +35,7 @@ const permission = {
 
 export const generateMetadataEmailSettingsAdmin =
   async (): Promise<Metadata> => {
-    const perm = await checkAdminPermissionMetadata(permission);
+    const perm = await checkAdminPermissionPageMetadata(permission);
     if (perm) return perm;
     const t = await getTranslations('admin_core.nav');
 
@@ -45,7 +45,7 @@ export const generateMetadataEmailSettingsAdmin =
   };
 
 export const EmailSettingsAdminView = async () => {
-  const perm = await checkAdminPermission(permission);
+  const perm = await checkAdminPermissionPage(permission);
   if (perm) return perm;
   const [t, data] = await Promise.all([
     getTranslations('admin.core.settings.email'),

diff --git a/...rontend/src/views/admin/views/core/settings/email/logs/logs-email-settings-admin-view.tsx b/...rontend/src/views/admin/views/core/settings/email/logs/logs-email-settings-admin-view.tsx
@@ -5,8 +5,8 @@ import {
   SearchParamsPagination,
 } from '@/graphql/get-pagination-tool';
 import {
-  checkAdminPermission,
-  checkAdminPermissionMetadata,
+  checkAdminPermissionPage,
+  checkAdminPermissionPageMetadata,
 } from '@/graphql/get-session-admin-data';
 import {
   Admin__Core_Email__Logs,
@@ -38,7 +38,7 @@ const permission = {
 
 export const generateMetadataLogsEmailSettingsAdmin =
   async (): Promise<Metadata> => {
-    const perm = await checkAdminPermissionMetadata(permission);
+    const perm = await checkAdminPermissionPageMetadata(permission);
     if (perm) return perm;
     const t = await getTranslations('admin.core.settings.email.logs');
 
@@ -52,7 +52,7 @@ export const LogsEmailSettingsAdminView = async ({
 }: {
   searchParams: Promise<SearchParamsPagination>;
 }) => {
-  const perm = await checkAdminPermission(permission);
+  const perm = await checkAdminPermissionPage(permission);
   if (perm) return perm;
   const variables = await getPaginationTool({
     searchParams,

diff --git a/packages/frontend/src/views/admin/views/core/settings/legal/legal-core-admin-view.tsx b/packages/frontend/src/views/admin/views/core/settings/legal/legal-core-admin-view.tsx
@@ -7,8 +7,8 @@ import {
   SearchParamsPagination,
 } from '@/graphql/get-pagination-tool';
 import {
-  checkAdminPermission,
-  checkAdminPermissionMetadata,
+  checkAdminPermissionPage,
+  checkAdminPermissionPageMetadata,
 } from '@/graphql/get-session-admin-data';
 import {
   Admin_Core_Terms__Show,
@@ -44,7 +44,7 @@ const permission = {
 };
 
 export const generateMetadataLegalSettingsAdmin = async () => {
-  const perm = await checkAdminPermissionMetadata(permission);
+  const perm = await checkAdminPermissionPageMetadata(permission);
   if (perm) return perm;
   const t = await getTranslations('admin.core.settings.legal');
 
@@ -58,7 +58,7 @@ export const LegalSettingsAdminView = async ({
 }: {
   searchParams: Promise<SearchParamsPagination>;
 }) => {
-  const perm = await checkAdminPermission(permission);
+  const perm = await checkAdminPermissionPage(permission);
   if (perm) return perm;
   const variables = await getPaginationTool({
     searchParams,