fix(ui): check for authorization [EE-6733] (#11208)

app/react/docker/containers/CreateView/CreateView.tsx

@@ -49,7 +49,7 @@ function CreateForm() {
   const router = useRouter();
   const { trackEvent } = useAnalytics();
   const isAdminQuery = useIsEdgeAdmin();
-  const isEnvironmentAdmin = useIsEnvironmentAdmin();
+  const { authorized: isEnvironmentAdmin } = useIsEnvironmentAdmin();
   const [isDockerhubRateLimited, setIsDockerhubRateLimited] = useState(false);
 
   const mutation = useCreateOrReplaceMutation();

app/react/docker/containers/CreateView/InnerForm.tsx

@@ -41,7 +41,7 @@ export function InnerForm({
   const environmentId = useEnvironmentId();
   const [tab, setTab] = useState('commands');
   const apiVersion = useApiVersion(environmentId);
-  const isEnvironmentAdmin = useIsEnvironmentAdmin();
+  const isEnvironmentAdminQuery = useIsEnvironmentAdmin();
   const envQuery = useCurrentEnvironment();
 
   if (!envQuery.data) {
@@ -102,7 +102,7 @@ export function InnerForm({
                             }
                             errors={errors.volumes}
                             allowBindMounts={
-                              isEnvironmentAdmin.authorized ||
+                              isEnvironmentAdminQuery.authorized ||
                               environment.SecuritySettings
                                 .allowBindMountsForRegularUsers
                             }
@@ -166,18 +166,18 @@ export function InnerForm({
                               setFieldValue(`resources.${field}`, value)
                             }
                             allowPrivilegedMode={
-                              isEnvironmentAdmin.authorized ||
+                              isEnvironmentAdminQuery.authorized ||
                               environment.SecuritySettings
                                 .allowPrivilegedModeForRegularUsers
                             }
                             isDevicesFieldVisible={
-                              isEnvironmentAdmin.authorized ||
+                              isEnvironmentAdminQuery.authorized ||
                               environment.SecuritySettings
                                 .allowDeviceMappingForRegularUsers
                             }
                             isInitFieldVisible={apiVersion >= 1.37}
                             isSysctlFieldVisible={
-                              isEnvironmentAdmin.authorized ||
+                              isEnvironmentAdminQuery.authorized ||
                               environment.SecuritySettings
                                 .allowSysctlSettingForRegularUsers
                             }

app/react/docker/containers/ItemView/ContainerNetworksDatatable/ConnectNetworkForm.tsx

@@ -25,7 +25,7 @@ export function ConnectNetworkForm({
   selectedNetworks: string[];
 }) {
   const environmentId = useEnvironmentId();
-  const authorized = useAuthorizations('DockerNetworkConnect');
+  const { authorized } = useAuthorizations('DockerNetworkConnect');
   const connectMutation = useConnectContainerMutation(environmentId);
   const router = useRouter();
   if (!authorized) {

app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx

@@ -68,7 +68,7 @@ export function ContainersDatatableActions({
     ].includes(item.Status)
   );
 
-  const isAuthorized = useAuthorizations([
+  const { authorized } = useAuthorizations([
     'DockerContainerStart',
     'DockerContainerStop',
     'DockerContainerKill',
@@ -81,12 +81,12 @@ export function ContainersDatatableActions({
 
   const router = useRouter();
 
-  if (!isAuthorized) {
+  if (!authorized) {
     return null;
   }
 
   return (
-    <>
+    <div className="flex gap-2">
       <ButtonGroup>
         <Authorized authorizations="DockerContainerStart">
           <Button
@@ -165,7 +165,6 @@ export function ContainersDatatableActions({
           </Button>
         </Authorized>
       </ButtonGroup>
-
       {isAddActionVisible && (
         <Authorized authorizations="DockerContainerCreate">
           <Link to="docker.containers.new" className="space-left">
@@ -173,7 +172,7 @@ export function ContainersDatatableActions({
           </Link>
         </Authorized>
       )}
-    </>
+    </div>
   );
 
   function onStartClick(selectedItems: DockerContainer[]) {

app/react/docker/containers/ListView/ContainersDatatable/columns/quick-actions.tsx

@@ -38,7 +38,7 @@ function QuickActionsCell({
     wrapperState.showQuickActionLogs ||
     wrapperState.showQuickActionStats;
 
-  const isAuthorized = useAuthorizations([
+  const { authorized } = useAuthorizations([
     'DockerContainerStats',
     'DockerContainerLogs',
     'DockerExecStart',
@@ -47,7 +47,7 @@ function QuickActionsCell({
     'DockerTaskLogs',
   ]);
 
-  if (!someOn || !isAuthorized) {
+  if (!someOn || !authorized) {
     return null;
   }
 

app/react/docker/stacks/ListView/StacksDatatable/StacksDatatable.tsx

@@ -35,7 +35,7 @@ export function StacksDatatable({
   const tableState = useTableState(settingsStore, tableKey);
   useRepeater(tableState.autoRefreshRate, onReload);
   const isAdminQuery = useIsEdgeAdmin();
-  const canManageStacks = useAuthorizations([
+  const { authorized: canManageStacks } = useAuthorizations([
     'PortainerStackCreate',
     'PortainerStackDelete',
   ]);
@@ -58,7 +58,7 @@ export function StacksDatatable({
       columns={columns}
       dataset={dataset}
       isRowSelectable={({ original: item }) =>
-        allowSelection(item, isAdminQuery.isAdmin, canManageStacks.authorized)
+        allowSelection(item, isAdminQuery.isAdmin, canManageStacks)
       }
       getRowId={(item) => item.Id.toString()}
       initialTableState={{

app/react/hooks/useUser.tsx

@@ -177,13 +177,13 @@ export function Authorized({
   children,
   childrenUnauthorized = null,
 }: PropsWithChildren<AuthorizedProps>) {
-  const isAllowed = useAuthorizations(
+  const { authorized } = useAuthorizations(
     authorizations,
     environmentId,
     adminOnlyCE
   );
 
-  return isAllowed ? <>{children}</> : <>{childrenUnauthorized}</>;
+  return authorized ? <>{children}</> : <>{childrenUnauthorized}</>;
 }
 
 interface UserProviderProps {

app/react/kubernetes/applications/DetailsView/PlacementsDatatable/PlacementsDatatableSubRow.tsx

@@ -13,7 +13,7 @@ interface SubRowProps {
 }
 
 export function SubRow({ node, cellCount }: SubRowProps) {
-  const authorized = useAuthorizations(
+  const { authorized } = useAuthorizations(
     'K8sApplicationErrorDetailsR',
     undefined,
     true

app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx

@@ -53,7 +53,7 @@ export function ApplicationsStacksDatatable({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showSystem]);
 
-  const authorized = useAuthorizations('K8sApplicationsW');
+  const { authorized } = useAuthorizations('K8sApplicationsW');
   useRepeater(tableState.autoRefreshRate, onRefresh);
 
   return (

app/react/kubernetes/applications/components/EditYamlFormSection.tsx

@@ -22,7 +22,7 @@ export function EditYamlFormSection({
   const environmentId = useEnvironmentId();
   const { data: deploymentOptions } =
     useEnvironmentDeploymentOptions(environmentId);
-  const roleHasAuth = useAuthorizations('K8sYAMLW');
+  const { authorized: roleHasAuth } = useAuthorizations('K8sYAMLW');
   const isAllowedToEdit = roleHasAuth && !deploymentOptions?.hideWebEditor;
   const formId = 'kubernetes-deploy-editor';
 

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/ConfigMapsDatatable.tsx

@@ -34,8 +34,9 @@ const settingsStore = createStore(storageKey);
 
 export function ConfigMapsDatatable() {
   const tableState = useTableState(settingsStore, storageKey);
-  const readOnly = !useAuthorizations(['K8sConfigMapsW']);
+  const { authorized: canWrite } = useAuthorizations(['K8sConfigMapsW']);
-  const canAccessSystemResources = useAuthorizations(
+  const readOnly = !canWrite;
+  const { authorized: canAccessSystemResources } = useAuthorizations(
     'K8sAccessSystemNamespaces'
   );
 

app/react/kubernetes/configs/ListView/SecretsDatatable/SecretsDatatable.tsx

@@ -34,8 +34,9 @@ const settingsStore = createStore(storageKey);
 
 export function SecretsDatatable() {
   const tableState = useTableState(settingsStore, storageKey);
-  const readOnly = !useAuthorizations(['K8sSecretsW']);
+  const { authorized: canWrite } = useAuthorizations(['K8sSecretsW']);
-  const canAccessSystemResources = useAuthorizations(
+  const readOnly = !canWrite;
+  const { authorized: canAccessSystemResources } = useAuthorizations(
     'K8sAccessSystemNamespaces'
   );
 

app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx

@@ -43,19 +43,21 @@ import {
 export function CreateIngressView() {
   const environmentId = useEnvironmentId();
   const { params } = useCurrentStateAndParams();
-  const isAuthorisedToAddEdit = useAuthorizations(['K8sIngressesW']);
+  const { authorized: isAuthorizedToAddEdit } = useAuthorizations([
+    'K8sIngressesW',
+  ]);
 
   const router = useRouter();
   const isEdit = !!params.namespace;
 
   useEffect(() => {
-    if (!isAuthorisedToAddEdit) {
+    if (!isAuthorizedToAddEdit) {
       const message = `Not authorized to ${isEdit ? 'edit' : 'add'} ingresses`;
       notifyError('Error', new Error(message));
       router.stateService.go('kubernetes.ingresses');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isAuthorisedToAddEdit, isEdit]);
+  }, [isAuthorizedToAddEdit, isEdit]);
 
   const [namespace, setNamespace] = useState<string>(params.namespace || '');
   const [ingressRule, setIngressRule] = useState<Rule>({} as Rule);

app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx

@@ -36,7 +36,7 @@ export function IngressDatatable() {
   const tableState = useTableState(settingsStore, storageKey);
   const environmentId = useEnvironmentId();
 
-  const canAccessSystemResources = useAuthorizations(
+  const { authorized: canAccessSystemResources } = useAuthorizations(
     'K8sAccessSystemNamespaces'
   );
   const { data: namespaces, ...namespacesQuery } =
@@ -147,7 +147,8 @@ export function IngressDatatable() {
   }
 
   function useCheckboxes() {
-    return !useAuthorizations(['K8sIngressesW']);
+    const { authorized } = useAuthorizations(['K8sIngressesW']);
+    return !authorized;
   }
 
   async function handleRemoveClick(ingresses: SelectedIngress[]) {

app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx

@@ -45,8 +45,9 @@ export function ServicesDatatable() {
     }
   );
 
-  const readOnly = !useAuthorizations(['K8sServiceW']);
+  const { authorized: canWrite } = useAuthorizations(['K8sServiceW']);
-  const canAccessSystemResources = useAuthorizations(
+  const readOnly = !canWrite;
+  const { authorized: canAccessSystemResources } = useAuthorizations(
     'K8sAccessSystemNamespaces'
   );
 

app/react/sidebar/DockerSidebar.tsx

@@ -30,7 +30,9 @@ interface Props {
 }
 
 export function DockerSidebar({ environmentId, environment }: Props) {
-  const isEnvironmentAdmin = useIsEnvironmentAdmin({ adminOnlyCE: true });
+  const { authorized: isEnvironmentAdmin } = useIsEnvironmentAdmin({
+    adminOnlyCE: true,
+  });
 
   const areStacksVisible =
     isEnvironmentAdmin ||