fix API tokens page license handling

web/messages/en/profile.json

@@ -48,9 +48,12 @@
   "profile_auth_keys_table_col_name": "Key name",
   "profile_auth_keys_table_menu_download_ssh": "Download SSH key",
   "profile_auth_keys_table_menu_download_gpg": "Download GPG key",
-  "profile_api_title": "API tokens",
-  "profile_api_add": "Add new API token",
-  "profile_api_empty_title": "You don't have any API tokens.",
-  "profile_api_empty_subtitle": "To add one, click the button below.",
-  "profile_api_col_name": "Token name"
+  "profile_api_tokens_title": "API tokens",
+  "profile_api_tokens_add": "Add new API token",
+  "profile_api_tokens_loading_title": "Checking API token availability...",
+  "profile_api_tokens_empty_title": "You don't have any API tokens.",
+  "profile_api_tokens_empty_subtitle": "To add one, click the button below.",
+  "profile_api_tokens_unavailable_title": "API Tokens Unavailable",
+  "profile_api_tokens_unavailable_subtitle": "Upgrade to the Business or Enterprise plan to enable API tokens and add one.",
+  "profile_api_tokens_col_name": "Token name"
 }

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

@@ -1,4 +1,4 @@
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { useMemo, useState } from 'react';
 import { m } from '../../../paraglide/messages';
@@ -8,13 +8,10 @@ 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 {
-  getAliasesQueryOptions,
-  getLicenseInfoQueryOptions,
-  getRulesQueryOptions,
-} from '../../../shared/query';
+import { getAliasesQueryOptions, getRulesQueryOptions } from '../../../shared/query';
 import { canUseBusinessFeature, licenseActionCheck } from '../../../shared/utils/license';
 import { DeletionBlockedModal } from '../../Acl/components/DeletionBlockedModal/DeletionBlockedModal';
+import { useRuleDeps } from '../../RulesPage/useRuleDeps';
 import { AliasTable } from '../AliasTable';
 
 export const AliasesDeployedTab = () => {
@@ -25,9 +22,7 @@ export const AliasesDeployedTab = () => {
   const isEmpty = aliases.length === 0;
   const navigate = useNavigate();
   const [search, setSearch] = useState('');
-  const { data: licenseInfo, isFetching: licenseFetching } = useQuery(
-    getLicenseInfoQueryOptions,
-  );
+  const { license, loading } = useRuleDeps();
   const { data: rules } = useSuspenseQuery(getRulesQueryOptions);
   const rulesByAliasId = useMemo(() => {
     const map: Record<number, string[]> = {};
@@ -51,15 +46,15 @@ export const AliasesDeployedTab = () => {
       iconLeft: 'add-alias',
       variant: 'primary',
       testId: 'add-alias',
-      disabled: licenseFetching,
+      disabled: loading,
       onClick: () => {
-        if (licenseInfo === undefined) return;
-        licenseActionCheck(canUseBusinessFeature(licenseInfo), () => {
+        if (license === undefined) return;
+        licenseActionCheck(canUseBusinessFeature(license), () => {
           navigate({ to: '/acl/add-alias' });
         });
       },
     }),
-    [navigate, licenseFetching, licenseInfo],
+    [navigate, loading, license],
   );
 
   const filteredAliases = useMemo(() => {

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

@@ -5,13 +5,16 @@ import { Button } from '../../../shared/defguard-ui/components/Button/Button';
 import { EmptyStateFlexible } from '../../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible';
 import { TableTop } from '../../../shared/defguard-ui/components/table/TableTop/TableTop';
 import { getAliasesQueryOptions, getRulesQueryOptions } from '../../../shared/query';
+import { canUseBusinessFeature, licenseActionCheck } from '../../../shared/utils/license';
+import { useRuleDeps } from '../../RulesPage/useRuleDeps';
 import { AliasTable } from '../AliasTable';
 
 export const AliasesPendingTab = () => {
   const { data: aliases } = useSuspenseQuery({
     ...getAliasesQueryOptions,
     select: (resp) => resp.data.filter((alias) => alias.state !== AclStatus.Applied),
   });
+  const { license, loading } = useRuleDeps();
   const { data: rules } = useSuspenseQuery(getRulesQueryOptions);
   const isEmpty = aliases.length === 0;
   const { mutate: applyAliases, isPending } = useMutation({
@@ -39,8 +42,12 @@ export const AliasesPendingTab = () => {
                 iconLeft="deploy"
                 text={`Deploy all pending (${aliases.length})`}
                 loading={isPending}
+                disabled={loading}
                 onClick={() => {
-                  applyAliases(aliases.map((alias) => alias.id));
+                  if (license === undefined) return;
+                  licenseActionCheck(canUseBusinessFeature(license), () => {
+                    applyAliases(aliases.map((alias) => alias.id));
+                  });
                 }}
               />
             )}

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

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import {
   createColumnHelper,
@@ -7,6 +7,7 @@ import {
 } from '@tanstack/react-table';
 import { useMemo, useState } from 'react';
 import { m } from '../../../paraglide/messages';
+import api from '../../../shared/api/api';
 import {
   type AclDestination,
   AclProtocolName,
@@ -71,6 +72,12 @@ export const DestinationsTable = ({
     getLicenseInfoQueryOptions,
   );
 
+  const { mutate: applyDestinations } = useMutation({
+    mutationFn: api.acl.destination.applyDestinations,
+    meta: {
+      invalidate: ['acl'],
+    },
+  });
   const columns = useMemo(
     () => [
       columnHelper.accessor('name', {
@@ -207,6 +214,18 @@ export const DestinationsTable = ({
               ],
             },
           ];
+          if (row.state === 'Modified') {
+            menuItems[0].items.splice(1, 0, {
+              text: 'Deploy',
+              icon: 'deploy',
+              onClick: () => {
+                if (licenseInfo === undefined) return;
+                licenseActionCheck(canUseBusinessFeature(licenseInfo), () => {
+                  applyDestinations([row.id]);
+                });
+              },
+            });
+          }
           return <TableEditCell menuItems={menuItems} disabled={licenseFetching} />;
         },
       }),
@@ -218,6 +237,7 @@ export const DestinationsTable = ({
       licenseFetching,
       licenseInfo,
       disableBlockedModal,
+      applyDestinations,
     ],
   );
 

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

@@ -1,19 +1,19 @@
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { useMemo } from 'react';
 import { AclStatus } from '../../../../shared/api/types';
 import type { ButtonProps } from '../../../../shared/defguard-ui/components/Button/types';
 import { EmptyStateFlexible } from '../../../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible';
 import {
   getDestinationsQueryOptions,
-  getLicenseInfoQueryOptions,
   getRulesQueryOptions,
 } from '../../../../shared/query';
 import {
   canUseBusinessFeature,
   licenseActionCheck,
 } from '../../../../shared/utils/license';
 import { DeletionBlockedModal } from '../../../Acl/components/DeletionBlockedModal/DeletionBlockedModal';
+import { useRuleDeps } from '../../../RulesPage/useRuleDeps';
 import { DestinationsTable } from '../../components/DestinationsTable';
 
 export const DestinationDeployedTab = () => {
@@ -24,25 +24,25 @@ export const DestinationDeployedTab = () => {
   });
   const navigate = useNavigate();
 
-  const { data: licenseInfo, isFetching } = useQuery(getLicenseInfoQueryOptions);
   const { data: rules } = useSuspenseQuery(getRulesQueryOptions);
+  const { license, loading } = useRuleDeps();
 
   const addButtonProps = useMemo(
     (): ButtonProps => ({
       text: 'Add new destination',
       variant: 'primary',
       iconLeft: 'add-location',
-      disabled: isFetching,
+      disabled: loading,
       onClick: () => {
-        if (licenseInfo === undefined) return;
-        licenseActionCheck(canUseBusinessFeature(licenseInfo), () => {
+        if (license === undefined) return;
+        licenseActionCheck(canUseBusinessFeature(license), () => {
           navigate({
             to: '/acl/add-destination',
           });
         });
       },
     }),
-    [navigate, isFetching, licenseInfo],
+    [navigate, loading, license],
   );
 
   return (

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

@@ -8,6 +8,11 @@ import {
   getDestinationsQueryOptions,
   getRulesQueryOptions,
 } from '../../../../shared/query';
+import {
+  canUseBusinessFeature,
+  licenseActionCheck,
+} from '../../../../shared/utils/license';
+import { useRuleDeps } from '../../../RulesPage/useRuleDeps';
 import { DestinationsTable } from '../../components/DestinationsTable';
 
 export const DestinationPendingTab = () => {
@@ -17,6 +22,7 @@ export const DestinationPendingTab = () => {
       resp.data.filter((destination) => destination.state !== AclStatus.Applied),
   });
   const { data: rules } = useSuspenseQuery(getRulesQueryOptions);
+  const { license, loading } = useRuleDeps();
 
   const { mutate, isPending } = useMutation({
     mutationFn: api.acl.destination.applyDestinations,
@@ -30,11 +36,15 @@ export const DestinationPendingTab = () => {
       text: `Deploy all pending (${destinations.length})`,
       iconLeft: 'deploy',
       loading: isPending,
+      disabled: loading,
       onClick: () => {
-        mutate(destinations.map((destination) => destination.id));
+        if (license === undefined) return;
+        licenseActionCheck(canUseBusinessFeature(license), () => {
+          mutate(destinations.map((destination) => destination.id));
+        });
       },
     }),
-    [isPending, mutate, destinations],
+    [isPending, mutate, destinations, license, loading],
   );
 
   return (

web/src/pages/RulesPage/RulesTable.tsx

@@ -352,15 +352,19 @@ export const RulesTable = ({
                   icon: 'disabled',
                   text: m.controls_disable(),
                   onClick: () => {
-                    toggleRule(row.id);
+                    licenseActionCheck(canUseBusinessFeature(license), () => {
+                      toggleRule(row.id);
+                    });
                   },
                 });
               } else {
                 topItems.push({
                   icon: 'check',
                   text: m.controls_enable(),
                   onClick: () => {
-                    toggleRule(row.id);
+                    licenseActionCheck(canUseBusinessFeature(license), () => {
+                      toggleRule(row.id);
+                    });
                   },
                 });
               }
@@ -369,8 +373,11 @@ export const RulesTable = ({
               topItems.push({
                 icon: 'deploy',
                 text: m.controls_deploy(),
+
                 onClick: () => {
-                  deployRule([row.id]);
+                  licenseActionCheck(canUseBusinessFeature(license), () => {
+                    deployRule([row.id]);
+                  });
                 },
               });
               break;