feat: add setting to select syntax in acl handlers (#2474)

Author: astandrik

src/containers/Tenant/Diagnostics/AccessRights/AccessRights.tsx

@@ -7,7 +7,7 @@ import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
 import {useEditAccessAvailable} from '../../../../store/reducers/capabilities/hooks';
 import {schemaAclApi} from '../../../../store/reducers/schemaAcl/schemaAcl';
-import {useAutoRefreshInterval} from '../../../../utils/hooks';
+import {useAclSyntax, useAutoRefreshInterval} from '../../../../utils/hooks';
 import {useCurrentSchema} from '../../TenantContext';
 import {useTenantQueryParams} from '../../useTenantQueryParams';
 
@@ -22,15 +22,18 @@ export function AccessRights() {
     const {path, database} = useCurrentSchema();
     const editable = useEditAccessAvailable();
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const {isLoading, error} = schemaAclApi.useGetSchemaAclQuery(
-        {path, database},
+    const dialect = useAclSyntax();
+    const {isFetching, currentData, error} = schemaAclApi.useGetSchemaAclQuery(
+        {path, database, dialect},
         {
             pollingInterval: autoRefreshInterval,
         },
     );
 
     const {handleShowGrantAccessChange} = useTenantQueryParams();
 
+    const loading = isFetching && !currentData;
+
     const renderContent = () => {
         if (error) {
             return <ResponseError error={error} />;
@@ -62,5 +65,5 @@ export function AccessRights() {
         );
     };
 
-    return <LoaderWrapper loading={isLoading}>{renderContent()}</LoaderWrapper>;
+    return <LoaderWrapper loading={loading}>{renderContent()}</LoaderWrapper>;
 }

src/containers/Tenant/Diagnostics/AccessRights/components/ChangeOwnerDialog.tsx

@@ -5,6 +5,7 @@ import {Dialog, Text, TextInput} from '@gravity-ui/uikit';
 
 import {schemaAclApi} from '../../../../../store/reducers/schemaAcl/schemaAcl';
 import createToast from '../../../../../utils/createToast';
+import {useAclSyntax} from '../../../../../utils/hooks';
 import {prepareErrorMessage} from '../../../../../utils/prepareErrorMessage';
 import i18n from '../i18n';
 import {block} from '../shared';
@@ -61,13 +62,14 @@ function ChangeOwnerDialog({open, onClose, path, database}: ChangeOwnerDialogPro
     const [newOwner, setNewOwner] = React.useState('');
     const [requestErrorMessage, setRequestErrorMessage] = React.useState('');
     const [updateOwner, updateOwnerResponse] = schemaAclApi.useUpdateAccessMutation();
+    const dialect = useAclSyntax();
 
     const handleTyping = (value: string) => {
         setNewOwner(value);
         setRequestErrorMessage('');
     };
     const onApply = () => {
-        updateOwner({path, database, rights: {ChangeOwnership: {Subject: newOwner}}})
+        updateOwner({path, database, dialect, rights: {ChangeOwnership: {Subject: newOwner}}})
             .unwrap()
             .then(() => {
                 onClose();

src/containers/Tenant/Diagnostics/AccessRights/components/Owner.tsx

@@ -4,7 +4,7 @@ import {ActionTooltip, Button, Card, Divider, Flex, Icon, Text} from '@gravity-u
 import {SubjectWithAvatar} from '../../../../../components/SubjectWithAvatar/SubjectWithAvatar';
 import {useEditAccessAvailable} from '../../../../../store/reducers/capabilities/hooks';
 import {selectSchemaOwner} from '../../../../../store/reducers/schemaAcl/schemaAcl';
-import {useTypedSelector} from '../../../../../utils/hooks';
+import {useAclSyntax, useTypedSelector} from '../../../../../utils/hooks';
 import {useCurrentSchema} from '../../../TenantContext';
 import i18n from '../i18n';
 import {block} from '../shared';
@@ -14,7 +14,8 @@ import {getChangeOwnerDialog} from './ChangeOwnerDialog';
 export function Owner() {
     const editable = useEditAccessAvailable();
     const {path, database} = useCurrentSchema();
-    const owner = useTypedSelector((state) => selectSchemaOwner(state, path, database));
+    const dialect = useAclSyntax();
+    const owner = useTypedSelector((state) => selectSchemaOwner(state, path, database, dialect));
 
     if (!owner) {
         return null;

src/containers/Tenant/Diagnostics/AccessRights/components/RightsTable/Actions.tsx

@@ -3,7 +3,7 @@ import {ActionTooltip, Button, Flex, Icon} from '@gravity-ui/uikit';
 
 import {useEditAccessAvailable} from '../../../../../../store/reducers/capabilities/hooks';
 import {selectSubjectExplicitRights} from '../../../../../../store/reducers/schemaAcl/schemaAcl';
-import {useTypedSelector} from '../../../../../../utils/hooks';
+import {useAclSyntax, useTypedSelector} from '../../../../../../utils/hooks';
 import {useCurrentSchema} from '../../../../TenantContext';
 import {useTenantQueryParams} from '../../../../useTenantQueryParams';
 import i18n from '../../i18n';
@@ -50,8 +50,9 @@ function GrantRightsToSubject({subject}: ActionProps) {
 
 function RevokeAllRights({subject}: ActionProps) {
     const {path, database} = useCurrentSchema();
+    const dialect = useAclSyntax();
     const subjectExplicitRights = useTypedSelector((state) =>
-        selectSubjectExplicitRights(state, subject, path, database),
+        selectSubjectExplicitRights(state, subject, path, database, dialect),
     );
     const noRightsToRevoke = subjectExplicitRights.length === 0;
 

src/containers/Tenant/Diagnostics/AccessRights/components/RightsTable/RevokeAllRightsDialog.tsx

@@ -9,7 +9,7 @@ import {
     selectSubjectExplicitRights,
 } from '../../../../../../store/reducers/schemaAcl/schemaAcl';
 import createToast from '../../../../../../utils/createToast';
-import {useTypedSelector} from '../../../../../../utils/hooks';
+import {useAclSyntax, useTypedSelector} from '../../../../../../utils/hooks';
 import {prepareErrorMessage} from '../../../../../../utils/prepareErrorMessage';
 import i18n from '../../i18n';
 
@@ -72,8 +72,9 @@ function RevokeAllRightsDialog({
     database,
     subject,
 }: RevokeAllRightsDialogProps) {
+    const dialect = useAclSyntax();
     const subjectExplicitRights = useTypedSelector((state) =>
-        selectSubjectExplicitRights(state, subject, path, database),
+        selectSubjectExplicitRights(state, subject, path, database, dialect),
     );
 
     const [requestErrorMessage, setRequestErrorMessage] = React.useState('');
@@ -83,6 +84,7 @@ function RevokeAllRightsDialog({
         removeAccess({
             path,
             database,
+            dialect,
             rights: {
                 RemoveAccess: [
                     {

src/containers/Tenant/Diagnostics/AccessRights/components/RightsTable/RightsTable.tsx

@@ -3,7 +3,7 @@ import type {Settings} from '@gravity-ui/react-data-table';
 import {ResizeableDataTable} from '../../../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {selectPreparedRights} from '../../../../../../store/reducers/schemaAcl/schemaAcl';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../../../utils/constants';
-import {useTypedSelector} from '../../../../../../utils/hooks';
+import {useAclSyntax, useTypedSelector} from '../../../../../../utils/hooks';
 import {useCurrentSchema} from '../../../../TenantContext';
 import i18n from '../../i18n';
 import {block} from '../../shared';
@@ -16,7 +16,8 @@ const AccessRightsTableSettings: Settings = {...DEFAULT_TABLE_SETTINGS, dynamicR
 
 export function RightsTable() {
     const {path, database} = useCurrentSchema();
-    const data = useTypedSelector((state) => selectPreparedRights(state, path, database));
+    const dialect = useAclSyntax();
+    const data = useTypedSelector((state) => selectPreparedRights(state, path, database, dialect));
     return (
         <ResizeableDataTable
             columnsWidthLSKey={RIGHT_TABLE_COLUMNS_WIDTH_LS_KEY}

src/containers/Tenant/GrantAccess/GrantAccess.tsx

@@ -10,7 +10,7 @@ import {
     selectSubjectInheritedRights,
 } from '../../../store/reducers/schemaAcl/schemaAcl';
 import createToast from '../../../utils/createToast';
-import {useTypedSelector} from '../../../utils/hooks';
+import {useAclSyntax, useTypedSelector} from '../../../utils/hooks';
 import {prepareErrorMessage} from '../../../utils/prepareErrorMessage';
 import {useCurrentSchema} from '../TenantContext';
 import {useTenantQueryParams} from '../useTenantQueryParams';
@@ -36,24 +36,27 @@ export function GrantAccess({handleCloseDrawer}: GrantAccessProps) {
     const [rightView, setRightsView] = React.useState<RightsView>('Groups');
 
     const {path, database} = useCurrentSchema();
+    const dialect = useAclSyntax();
     const {currentRightsMap, setExplicitRightsChanges, rightsToGrant, rightsToRevoke, hasChanges} =
         useRights({aclSubject: aclSubject ?? undefined, path, database});
     const {isFetching: aclIsFetching} = schemaAclApi.useGetSchemaAclQuery(
         {
             path,
             database,
+            dialect,
         },
         {skip: !aclSubject},
     );
     const {isFetching: availableRightsAreFetching} = schemaAclApi.useGetAvailablePermissionsQuery({
         database,
+        dialect,
     });
     const [updateRights, updateRightsResponse] = schemaAclApi.useUpdateAccessMutation();
 
     const [updateRightsError, setUpdateRightsError] = React.useState('');
 
     const inheritedRightsSet = useTypedSelector((state) =>
-        selectSubjectInheritedRights(state, aclSubject ?? undefined, path, database),
+        selectSubjectInheritedRights(state, aclSubject ?? undefined, path, database, dialect),
     );
 
     const handleDiscardRightsChanges = React.useCallback(() => {
@@ -68,6 +71,7 @@ export function GrantAccess({handleCloseDrawer}: GrantAccessProps) {
         updateRights({
             path,
             database,
+            dialect,
             rights: {
                 AddAccess: subjects.map((subj) => ({
                     AccessRights: rightsToGrant,
@@ -98,6 +102,7 @@ export function GrantAccess({handleCloseDrawer}: GrantAccessProps) {
         updateRights,
         path,
         database,
+        dialect,
         rightsToGrant,
         aclSubject,
         rightsToRevoke,
@@ -106,7 +111,7 @@ export function GrantAccess({handleCloseDrawer}: GrantAccessProps) {
     ]);
 
     const availablePermissions = useTypedSelector((state) =>
-        selectAvailablePermissions(state, database),
+        selectAvailablePermissions(state, database, dialect),
     );
     const handleChangeRightGetter = React.useCallback(
         (right: string) => {

src/containers/Tenant/GrantAccess/utils.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {selectSubjectExplicitRights} from '../../../store/reducers/schemaAcl/schemaAcl';
-import {useTypedSelector} from '../../../utils/hooks';
+import {useAclSyntax, useTypedSelector} from '../../../utils/hooks';
 
 interface UseRightsProps {
     aclSubject?: string;
@@ -10,8 +10,9 @@ interface UseRightsProps {
 }
 
 export function useRights({aclSubject, path, database}: UseRightsProps) {
+    const dialect = useAclSyntax();
     const subjectExplicitRights = useTypedSelector((state) =>
-        selectSubjectExplicitRights(state, aclSubject ?? undefined, path, database),
+        selectSubjectExplicitRights(state, aclSubject ?? undefined, path, database, dialect),
     );
     const [explicitRightsChanges, setExplicitRightsChanges] = React.useState(
         () => new Map<string, boolean>(),

src/containers/UserSettings/i18n/en.json

@@ -48,5 +48,11 @@
   "settings.useClusterBalancerAsBackend.title": "Use cluster balancer as backend",
   "settings.useClusterBalancerAsBackend.description": "By default random cluster node is used as backend. It causes saved links to become invalid after some time, when node is restarted. Using balancer as backend fixes it",
 
+  "settings.aclSyntax.title": "ACL syntax format",
+  "settings.aclSyntax.option-kikimr": "KiKiMr",
+  "settings.aclSyntax.option-ydb-short": "YDB Short",
+  "settings.aclSyntax.option-ydb": "YDB",
+  "settings.aclSyntax.option-yql": "YQL",
+
   "settings.about.interfaceVersionInfoField.title": "Interface version"
 }

src/containers/UserSettings/settings.tsx

@@ -4,7 +4,9 @@ import {createNextState} from '@reduxjs/toolkit';
 
 import {codeAssistBackend} from '../../store';
 import {
+    ACL_SYNTAX_KEY,
     AUTOCOMPLETE_ON_ENTER,
+    AclSyntax,
     BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
     ENABLE_AUTOCOMPLETE,
     ENABLE_CODE_ASSISTANT,
@@ -147,6 +149,32 @@ export const autocompleteOnEnterSetting: SettingProps = {
     description: i18n('settings.editor.autocomplete-on-enter.description'),
 };
 
+const aclSyntaxOptions = [
+    {
+        value: AclSyntax.Kikimr,
+        content: i18n('settings.aclSyntax.option-kikimr'),
+    },
+    {
+        value: AclSyntax.YdbShort,
+        content: i18n('settings.aclSyntax.option-ydb-short'),
+    },
+    {
+        value: AclSyntax.Ydb,
+        content: i18n('settings.aclSyntax.option-ydb'),
+    },
+    {
+        value: AclSyntax.Yql,
+        content: i18n('settings.aclSyntax.option-yql'),
+    },
+];
+
+export const aclSyntaxSetting: SettingProps = {
+    settingKey: ACL_SYNTAX_KEY,
+    title: i18n('settings.aclSyntax.title'),
+    type: 'radio',
+    options: aclSyntaxOptions,
+};
+
 export const interfaceVersionInfoField: SettingsInfoFieldProps = {
     title: i18n('settings.about.interfaceVersionInfoField.title'),
     type: 'info',
@@ -161,6 +189,7 @@ export const appearanceSection: SettingsSection = {
         invertedDisksSetting,
         binaryDataInPlainTextDisplay,
         showDomainDatabase,
+        aclSyntaxSetting,
     ],
 };