protect acl actions (#2072)

Author: filipslezaklab

web/src/pages/AliasesPage/AliasTable.tsx

@@ -17,6 +17,8 @@ import { tableEditColumnSize } from '../../shared/defguard-ui/components/table/c
 import { TableBody } from '../../shared/defguard-ui/components/table/TableBody/TableBody';
 import { TableCell } from '../../shared/defguard-ui/components/table/TableCell/TableCell';
 import { isPresent } from '../../shared/defguard-ui/utils/isPresent';
+import { getLicenseInfoQueryOptions } from '../../shared/query';
+import { canUseBusinessFeature, licenseActionCheck } from '../../shared/utils/license';
 
 type RowData = AclAlias;
 
@@ -29,6 +31,10 @@ type Props = {
 export const AliasTable = ({ data: rowData }: Props) => {
   const navigate = useNavigate();
 
+  const { data: licenseInfo, isFetching: isLicenseFetching } = useQuery(
+    getLicenseInfoQueryOptions,
+  );
+
   const { data: rules } = useQuery({
     queryFn: api.acl.rule.getRules,
     queryKey: ['acl', 'rule'],
@@ -124,11 +130,14 @@ export const AliasTable = ({ data: rowData }: Props) => {
                   text: m.controls_edit(),
                   icon: 'edit',
                   onClick: () => {
-                    navigate({
-                      to: '/acl/edit-alias',
-                      search: {
-                        alias: row.id,
-                      },
+                    if (licenseInfo === undefined) return;
+                    licenseActionCheck(canUseBusinessFeature(licenseInfo), () => {
+                      navigate({
+                        to: '/acl/edit-alias',
+                        search: {
+                          alias: row.id,
+                        },
+                      });
                     });
                   },
                 },
@@ -137,7 +146,10 @@ export const AliasTable = ({ data: rowData }: Props) => {
                   icon: 'delete',
                   variant: 'danger',
                   onClick: () => {
-                    deleteAlias(row.id);
+                    if (licenseInfo === undefined) return;
+                    licenseActionCheck(canUseBusinessFeature(licenseInfo), () => {
+                      deleteAlias(row.id);
+                    });
                   },
                 },
               ],
@@ -148,19 +160,26 @@ export const AliasTable = ({ data: rowData }: Props) => {
               text: 'Deploy',
               icon: 'deploy',
               onClick: () => {
-                applyAliases([row.id]);
+                if (licenseInfo === undefined) return;
+                licenseActionCheck(canUseBusinessFeature(licenseInfo), () => {
+                  applyAliases([row.id]);
+                });
               },
             });
           }
           return (
             <TableCell>
-              <IconButtonMenu icon="menu" menuItems={menuItems} />
+              <IconButtonMenu
+                icon="menu"
+                menuItems={menuItems}
+                disabled={isLicenseFetching}
+              />
             </TableCell>
           );
         },
       }),
     ],
-    [rules, applyAliases, deleteAlias, navigate],
+    [rules, applyAliases, deleteAlias, navigate, isLicenseFetching, licenseInfo],
   );
 
   const table = useReactTable({

web/src/pages/AliasesPage/tabs/AliasesDeployedTab.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { useMemo, useState } from 'react';
 import { m } from '../../../paraglide/messages';
@@ -7,6 +8,8 @@ import type { ButtonProps } from '../../../shared/defguard-ui/components/Button/
 import { EmptyStateFlexible } from '../../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible';
 import { Search } from '../../../shared/defguard-ui/components/Search/Search';
 import { TableTop } from '../../../shared/defguard-ui/components/table/TableTop/TableTop';
+import { getLicenseInfoQueryOptions } from '../../../shared/query';
+import { canUseBusinessFeature, licenseActionCheck } from '../../../shared/utils/license';
 import { AliasTable } from '../AliasTable';
 
 type Props = {
@@ -17,18 +20,25 @@ export const AliasesDeployedTab = ({ aliases }: Props) => {
   const isEmpty = aliases.length === 0;
   const navigate = useNavigate();
   const [search, setSearch] = useState('');
+  const { data: licenseInfo, isFetching: licenseFetching } = useQuery(
+    getLicenseInfoQueryOptions,
+  );
 
   const addButtonProps = useMemo(
     (): ButtonProps => ({
       text: 'Add new alias',
       iconLeft: 'add-alias',
       variant: 'primary',
       testId: 'add-alias',
+      disabled: licenseFetching,
       onClick: () => {
-        navigate({ to: '/acl/add-alias' });
+        if (licenseInfo === undefined) return;
+        licenseActionCheck(canUseBusinessFeature(licenseInfo), () => {
+          navigate({ to: '/acl/add-alias' });
+        });
       },
     }),
-    [navigate],
+    [navigate, licenseFetching, licenseInfo],
   );
 
   const distilledAliases = useMemo(() => {

web/src/pages/DestinationsPage/components/DestinationsTable.tsx

@@ -20,7 +20,8 @@ import { tableEditColumnSize } from '../../../shared/defguard-ui/components/tabl
 import { TableBody } from '../../../shared/defguard-ui/components/table/TableBody/TableBody';
 import { TableCell } from '../../../shared/defguard-ui/components/table/TableCell/TableCell';
 import { TableTop } from '../../../shared/defguard-ui/components/table/TableTop/TableTop';
-import { getRulesQueryOptions } from '../../../shared/query';
+import { getLicenseInfoQueryOptions, getRulesQueryOptions } from '../../../shared/query';
+import { canUseBusinessFeature, licenseActionCheck } from '../../../shared/utils/license';
 import { resourceById } from '../../../shared/utils/resourceById';
 
 type Props = {
@@ -45,6 +46,10 @@ export const DestinationsTable = ({
   const [searchValue, setSearchValue] = useState<string>('');
   const navigate = useNavigate();
 
+  const { data: licenseInfo, isFetching: licenseFetching } = useQuery(
+    getLicenseInfoQueryOptions,
+  );
+
   const { mutate: deleteDestination } = useMutation({
     mutationFn: api.acl.destination.deleteDestination,
     meta: {
@@ -137,11 +142,14 @@ export const DestinationsTable = ({
                   text: m.controls_edit(),
                   icon: 'edit',
                   onClick: () => {
-                    navigate({
-                      to: '/acl/edit-destination',
-                      search: {
-                        destination: row.id,
-                      },
+                    if (licenseInfo === undefined) return;
+                    licenseActionCheck(canUseBusinessFeature(licenseInfo), () => {
+                      navigate({
+                        to: '/acl/edit-destination',
+                        search: {
+                          destination: row.id,
+                        },
+                      });
                     });
                   },
                 },
@@ -150,21 +158,28 @@ export const DestinationsTable = ({
                   icon: 'delete',
                   variant: 'danger',
                   onClick: () => {
-                    deleteDestination(row.id);
+                    if (licenseInfo === undefined) return;
+                    licenseActionCheck(canUseBusinessFeature(licenseInfo), () => {
+                      deleteDestination(row.id);
+                    });
                   },
                 },
               ],
             },
           ];
           return (
             <TableCell>
-              <IconButtonMenu icon="menu" menuItems={menuItems} />
+              <IconButtonMenu
+                icon="menu"
+                menuItems={menuItems}
+                disabled={licenseFetching}
+              />
             </TableCell>
           );
         },
       }),
     ],
-    [navigate, deleteDestination, rulesById],
+    [navigate, deleteDestination, rulesById, licenseFetching, licenseInfo],
   );
 
   const transformedData = useMemo(() => {

web/src/pages/DestinationsPage/tabs/DestinationDeployedTab/DestinationDeployedTab.tsx

@@ -1,8 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { useMemo } from 'react';
 import type { AclDestination } from '../../../../shared/api/types';
 import type { ButtonProps } from '../../../../shared/defguard-ui/components/Button/types';
 import { EmptyStateFlexible } from '../../../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible';
+import { getLicenseInfoQueryOptions } from '../../../../shared/query';
+import {
+  canUseBusinessFeature,
+  licenseActionCheck,
+} from '../../../../shared/utils/license';
 import { DestinationsTable } from '../../components/DestinationsTable';
 
 type Props = {
@@ -12,18 +18,24 @@ type Props = {
 export const DestinationDeployedTab = ({ destinations }: Props) => {
   const navigate = useNavigate();
 
+  const { data: licenseInfo, isFetching } = useQuery(getLicenseInfoQueryOptions);
+
   const addButtonProps = useMemo(
     (): ButtonProps => ({
       text: 'Add new destination',
       variant: 'primary',
       iconLeft: 'add-location',
+      disabled: isFetching,
       onClick: () => {
-        navigate({
-          to: '/acl/add-destination',
+        if (licenseInfo === undefined) return;
+        licenseActionCheck(canUseBusinessFeature(licenseInfo), () => {
+          navigate({
+            to: '/acl/add-destination',
+          });
         });
       },
     }),
-    [navigate],
+    [navigate, isFetching, licenseInfo],
   );
 
   return (

web/src/pages/RulesPage/RulesTable.tsx

@@ -15,6 +15,7 @@ import {
   AclStatus,
   type AclStatusValue,
   type GroupInfo,
+  type LicenseInfo,
   type NetworkDevice,
   type NetworkLocation,
   type ResourceById,
@@ -34,6 +35,7 @@ import { TableBody } from '../../shared/defguard-ui/components/table/TableBody/T
 import { TableCell } from '../../shared/defguard-ui/components/table/TableCell/TableCell';
 import { TableTop } from '../../shared/defguard-ui/components/table/TableTop/TableTop';
 import { isPresent } from '../../shared/defguard-ui/utils/isPresent';
+import { canUseBusinessFeature, licenseActionCheck } from '../../shared/utils/license';
 
 const displayUser = (user?: User): string => {
   if (!isPresent(user)) return '~';
@@ -49,6 +51,7 @@ type RowData = AclRule;
 const columnHelper = createColumnHelper<RowData>();
 
 type Props = {
+  license: LicenseInfo | null;
   aliases: ResourceById<AclAlias>;
   groups: ResourceById<GroupInfo>;
   users: ResourceById<User>;
@@ -70,8 +73,10 @@ export const RulesTable = ({
   users,
   locations,
   data,
+  license,
 }: Props) => {
   const navigate = useNavigate();
+
   const { mutate: deleteRule } = useMutation({
     mutationFn: api.acl.rule.deleteRule,
     meta: {
@@ -270,11 +275,13 @@ export const RulesTable = ({
                   icon: 'edit',
                   text: m.controls_edit(),
                   onClick: () => {
-                    navigate({
-                      to: '/acl/edit-rule',
-                      search: {
-                        rule: row.id,
-                      },
+                    licenseActionCheck(canUseBusinessFeature(license), () => {
+                      navigate({
+                        to: '/acl/edit-rule',
+                        search: {
+                          rule: row.id,
+                        },
+                      });
                     });
                   },
                 },
@@ -287,7 +294,9 @@ export const RulesTable = ({
                   variant: 'danger',
                   text: m.controls_delete(),
                   onClick: () => {
-                    deleteRule(row.id);
+                    licenseActionCheck(canUseBusinessFeature(license), () => {
+                      deleteRule(row.id);
+                    });
                   },
                 },
               ],
@@ -301,7 +310,15 @@ export const RulesTable = ({
         },
       }),
     ],
-    [aliases, renderPermissionCell, deleteRule, locations, navigate, renderStatusCell],
+    [
+      aliases,
+      renderPermissionCell,
+      deleteRule,
+      locations,
+      navigate,
+      renderStatusCell,
+      license,
+    ],
   );
 
   const visibleRules = useMemo(() => {

web/src/pages/RulesPage/tabs/RulesDeployedTab.tsx

@@ -41,7 +41,7 @@ export const RulesDeployedTab = ({ rules }: Props) => {
     [navigate, licenseFetching, licenseInfo],
   );
 
-  const { aliases, groups, locations, users, devices, loading } = useRuleDeps();
+  const { aliases, groups, locations, users, devices, license, loading } = useRuleDeps();
 
   return (
     <>
@@ -59,7 +59,8 @@ export const RulesDeployedTab = ({ rules }: Props) => {
         isPresent(groups) &&
         isPresent(locations) &&
         isPresent(users) &&
-        isPresent(devices) && (
+        isPresent(devices) &&
+        isPresent(license) && (
           <RulesTable
             title="Deployed rules"
             buttonProps={buttonProps}
@@ -69,6 +70,7 @@ export const RulesDeployedTab = ({ rules }: Props) => {
             devices={devices}
             users={users}
             locations={locations}
+            license={license}
             enableSearch
           />
         )}