feat(Acl): support InterruptInheritance, fix styles (#1154)

Author: Raubzeug

src/containers/Tenant/Acl/Acl.scss

@@ -5,10 +5,15 @@
     &__result {
         padding-bottom: var(--g-spacing-4);
         padding-left: var(--g-spacing-2);
+
+        &_no-title {
+            margin-top: var(--g-spacing-3);
+        }
     }
     &__definition-content {
         display: flex;
         flex-direction: column;
+        align-items: flex-end;
     }
     &__list-title {
         margin: var(--g-spacing-3) 0 var(--g-spacing-5);

src/containers/Tenant/Acl/Acl.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import {DefinitionList} from '@gravity-ui/components';
 import type {DefinitionListItem} from '@gravity-ui/components';
+import {SquareCheck} from '@gravity-ui/icons';
+import {Icon} from '@gravity-ui/uikit';
 
 import {ResponseError} from '../../../components/Errors/ResponseError';
 import {Loader} from '../../../components/Loader';
@@ -94,6 +96,7 @@ function getAclListItems(acl?: TACE[]): DefinitionListItem[] {
             return {
                 name: Subject,
                 content: <DefinitionValue value={definedDataEntries[0][1]} />,
+                multilineName: true,
             };
         }
         return {
@@ -105,6 +108,7 @@ function getAclListItems(acl?: TACE[]): DefinitionListItem[] {
                         return {
                             name: aclParamToName[key],
                             content: <DefinitionValue value={value} />,
+                            multilineName: true,
                         };
                     }
                     return undefined;
@@ -121,8 +125,22 @@ function getOwnerItem(owner?: string): DefinitionListItem[] {
     }
     return [
         {
-            name: <span className={b('owner')}>{preparedOwner}</span>,
-            content: <span className={b('owner')}>{i18n('title_owner')}</span>,
+            name: preparedOwner,
+            content: i18n('title_owner'),
+            multilineName: true,
+        },
+    ];
+}
+
+function getInterruptInheritanceItem(flag?: boolean): DefinitionListItem[] {
+    if (!flag) {
+        return [];
+    }
+    return [
+        {
+            name: i18n('title_interupt-inheritance'),
+            content: <Icon data={SquareCheck} size={20} />,
+            multilineName: true,
         },
     ];
 }
@@ -132,13 +150,15 @@ export const Acl = ({path, database}: {path: string; database: string}) => {
 
     const loading = isFetching && !currentData;
 
-    const {acl, effectiveAcl, owner} = currentData || {};
+    const {acl, effectiveAcl, owner, interruptInheritance} = currentData || {};
 
     const aclListItems = getAclListItems(acl);
     const effectiveAclListItems = getAclListItems(effectiveAcl);
 
     const ownerItem = getOwnerItem(owner);
 
+    const interruptInheritanceItem = getInterruptInheritanceItem(interruptInheritance);
+
     if (loading) {
         return <Loader />;
     }
@@ -155,26 +175,34 @@ export const Acl = ({path, database}: {path: string; database: string}) => {
 
     return (
         <div className={b()}>
-            {accessRightsItems.length ? (
-                <React.Fragment>
-                    <div className={b('list-title')}>{i18n('title_rights')}</div>
-                    <DefinitionList
-                        items={accessRightsItems}
-                        nameMaxWidth={200}
-                        className={b('result')}
-                    />
-                </React.Fragment>
-            ) : null}
-            {effectiveAclListItems.length ? (
-                <React.Fragment>
-                    <div className={b('list-title')}>{i18n('title_effective-rights')}</div>
-                    <DefinitionList
-                        items={effectiveAclListItems}
-                        nameMaxWidth={200}
-                        className={b('result')}
-                    />
-                </React.Fragment>
-            ) : null}
+            <AclDefinitionList items={interruptInheritanceItem} />
+            <AclDefinitionList items={accessRightsItems} title={i18n('title_rights')} />
+            <AclDefinitionList
+                items={effectiveAclListItems}
+                title={i18n('title_effective-rights')}
+            />
         </div>
     );
 };
+
+interface AclDefinitionListProps {
+    items: DefinitionListItem[];
+    title?: string;
+}
+
+function AclDefinitionList({items, title}: AclDefinitionListProps) {
+    if (!items.length) {
+        return null;
+    }
+    return (
+        <React.Fragment>
+            {title && <div className={b('list-title')}>{title}</div>}
+            <DefinitionList
+                items={items}
+                nameMaxWidth={200}
+                className={b('result', {'no-title': !title})}
+                responsive
+            />
+        </React.Fragment>
+    );
+}

src/containers/Tenant/Acl/i18n/en.json

@@ -2,5 +2,6 @@
   "title_rights": "Access Rights",
   "title_effective-rights": "Effective Access Rights",
   "title_owner": "Owner",
+  "title_interupt-inheritance": "Interrupt inheritance",
   "description_empty": "No Acl data"
 }

src/store/reducers/schemaAcl/schemaAcl.ts

@@ -11,6 +11,7 @@ export const schemaAclApi = api.injectEndpoints({
                             acl: data.Common.ACL,
                             effectiveAcl: data.Common.EffectiveACL,
                             owner: data.Common.Owner,
+                            interruptInheritance: data.Common.InterruptInheritance,
                         },
                     };
                 } catch (error) {

src/types/api/acl.ts

@@ -15,6 +15,7 @@ export interface TMetaCommonInfo {
     Owner?: string;
     ACL?: TACE[];
     EffectiveACL?: TACE[];
+    InterruptInheritance?: boolean;
 }
 
 export interface TACE {