feat(ACL): separate dialog for 'Edit inheritance' [YTFRONT-3836]

Uncaught Error: A state mutation was detected between dispatches, in the path 'acl.path.objectPermissions.0.permissions.0'. This may cause incorrect behavior. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)
ytsaurus · Nov 26, 2024 · 83d5965 · 83d5965
1 parent 4aa0f39
commit 83d5965
Show file tree

Hide file tree

Showing 13 changed files with 293 additions and 71 deletions.
diff --git a/packages/ui/src/ui/containers/ACL/ACL.scss b/packages/ui/src/ui/containers/ACL/ACL.scss
@@ -138,13 +138,10 @@
         }
     }
 
-    &__meta {
-        margin-bottom: 20px;
-    }
-
     &__meta-item {
-        &_flags {
-            margin-right: 16px;
+        margin-bottom: 20px;
+        &_with-buttons {
+            margin-right: 500px;
         }
     }
 

diff --git a/packages/ui/src/ui/containers/ACL/ACL.tsx b/packages/ui/src/ui/containers/ACL/ACL.tsx
@@ -632,15 +632,19 @@ class ACL extends Component<Props> {
                       {name: 'Object permissions', value: mainPermissions.count},
                   ];
 
+        const hasColumns = Boolean(aclMode);
         return (
             <Flex className={block('meta')} wrap alignItems="center">
                 <SegmentControl
-                    className={block('meta-overview')}
+                    className={block('meta-item')}
                     background="neutral-light"
                     groups={[segments, counters].filter(({length}) => length > 0)}
                 />
                 {aclMode !== AclMode.COLUMN_GROUPS_PERMISSISONS && (
-                    <MyPermissions userPermissions={userPermissions} />
+                    <MyPermissions
+                        className={block('meta-item', {'with-buttons': !hasColumns})}
+                        userPermissions={userPermissions}
+                    />
                 )}
             </Flex>
         );

diff --git a/packages/ui/src/ui/containers/ACL/AclActions/AclActions.tsx b/packages/ui/src/ui/containers/ACL/AclActions/AclActions.tsx
@@ -10,6 +10,7 @@ import RequestPermissions from '../RequestPermissions/RequestPermissions';
 import ManageAcl from '../ManageAcl/ManageAcl';
 import {ACLReduxProps} from '../ACL-connect-helpers';
 import {IdmKindType} from '../../../utils/acl/acl-types';
+import ManageInheritance from '../ManageInheritance/ManageInheritance';
 
 const block = cn('acl-user-permissions');
 
@@ -105,7 +106,7 @@ export class AclActions extends Component<Props> {
                                 columnGroups={columnGroups}
                             />
                             {aclMode !== AclMode.COLUMN_GROUPS_PERMISSISONS && (
-                                <ManageAcl
+                                <ManageInheritance
                                     loadAclData={loadAclData}
                                     loading={loading}
                                     error={error}
@@ -114,6 +115,20 @@ export class AclActions extends Component<Props> {
                                     idmKind={idmKind}
                                     version={version}
                                     inheritAcl={inheritAcl}
+                                    updateAcl={this.updateAcl}
+                                    manageAclError={updateAclError}
+                                    cancelUpdateAcl={cancelUpdateAcl}
+                                />
+                            )}
+                            {aclMode !== AclMode.COLUMN_GROUPS_PERMISSISONS && (
+                                <ManageAcl
+                                    loadAclData={loadAclData}
+                                    loading={loading}
+                                    error={error}
+                                    errorData={errorData}
+                                    path={path}
+                                    idmKind={idmKind}
+                                    version={version}
                                     bossApproval={bossApproval}
                                     disableInheritanceResponsible={disableInheritanceResponsible}
                                     auditors={auditors}

diff --git a/packages/ui/src/ui/containers/ACL/ManageAcl/ManageAcl.tsx b/packages/ui/src/ui/containers/ACL/ManageAcl/ManageAcl.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {compose} from 'redux';
 import cn from 'bem-cn-lite';
 
@@ -27,7 +27,6 @@ import Button from '../../../components/Button/Button';
 import withVisible, {WithVisibleProps} from '../../../hocs/withVisible';
 
 import UIFactory from '../../../UIFactory';
-import ErrorBlock from '../../../components/Block/Block';
 import {ACLReduxProps} from '../ACL-connect-helpers';
 
 import './ManageAcl.scss';
@@ -41,9 +40,10 @@ export type ManageAclFieldsNames =
     | 'auditors'
     | 'bossApproval'
     | 'inheritAcl'
-    | 'inheritAcl_warning'
     | 'comment';
 
+export type ManageInheritanceFieldNames = 'inheritAcl' | 'inheritAcl_warning' | 'comment';
+
 interface Props extends WithVisibleProps {
     className?: string;
     path: string;
@@ -56,7 +56,6 @@ interface Props extends WithVisibleProps {
     readApprovers: Array<PreparedRole>;
     disableInheritanceResponsible?: boolean | PreparedRole;
     bossApproval?: PreparedRole;
-    inheritAcl?: boolean | PreparedRole;
     error: boolean;
     manageAclError?: YTError;
     errorData?: YTError;
@@ -71,7 +70,6 @@ interface FormValues {
     readApprovers: RoleListControlProps['value'];
     inheritanceResponsible: boolean;
     bossApproval: boolean;
-    inheritAcl: boolean;
     comment?: string;
 }
 
@@ -86,7 +84,6 @@ function ManageAcl(props: Props) {
         handleShow,
         handleClose,
         bossApproval,
-        inheritAcl,
         disableInheritanceResponsible,
         auditors,
         responsible,
@@ -99,8 +96,6 @@ function ManageAcl(props: Props) {
         updateAcl,
     } = props;
 
-    const [hasWarning, setHasWarning] = useState(false);
-
     const handleModalOpen = useCallback(() => {
         loadAclData({path, idmKind});
         handleShow();
@@ -113,14 +108,16 @@ function ManageAcl(props: Props) {
 
     const onAdd = useCallback(
         (form: FormApi<FormValues, Partial<FormValues>>) => {
-            const {auditors, readApprovers, responsible, ...rest} = form.getState().values;
+            const {auditors, readApprovers, responsible, inheritanceResponsible, ...rest} =
+                form.getState().values;
 
             return updateAcl({
                 path,
                 idmKind,
                 values: {
                     ...rest,
-                    responsibleApproval: roleListValueToSubjectList(responsible),
+                    disableInheritance: !inheritanceResponsible,
+                    responsible: roleListValueToSubjectList(responsible),
                     auditors: roleListValueToSubjectList(auditors),
                     readApprovers: roleListValueToSubjectList(readApprovers),
                 },
@@ -170,58 +167,31 @@ function ManageAcl(props: Props) {
                     type: 'tumbler',
                     caption: 'Boss approval',
                 },
-                inheritAcl: {
-                    name: 'inheritAcl',
-                    type: 'tumbler',
-                    caption: 'Inherit ACL',
-                    onChange: (value) => {
-                        setHasWarning(!value);
-                    },
-                },
-                inheritAcl_warning: {
-                    name: 'inheritAcl_warning',
-                    type: 'block',
-                    extras: {
-                        children: hasWarning ? (
-                            <ErrorBlock
-                                type={'alert'}
-                                message={
-                                    <>
-                                        Setting <span className={block('flag')}>inherit_acl</span>{' '}
-                                        flag to <span className={block('flag')}>false</span> may
-                                        result in the loss of permissions sufficient to undo this
-                                        operation.{' '}
-                                    </>
-                                }
-                            ></ErrorBlock>
-                        ) : null,
-                    },
-                },
                 comment: {
                     name: 'comment',
                     caption: 'Comment for IDM',
                     type: 'textarea',
                 },
             }) as Record<ManageAclFieldsNames, DialogField<FormValues>>,
-        [hasWarning],
+        [],
     );
 
+    const {manageAclFields} = UIFactory.getAclApi();
     const dialogFields = useMemo(() => {
         const permissionsSettings = UIFactory.getAclPermissionsSettings();
         const idmKindConditions: {[Key in ManageAclFieldsNames]?: boolean} = {
-            inheritAcl: permissionsSettings[idmKind].allowInheritAcl,
             bossApproval: permissionsSettings[idmKind].allowBossApprovals,
             auditors: permissionsSettings[idmKind].allowAuditors,
             readApprovers: permissionsSettings[idmKind].allowReadApprovers,
             inheritanceResponsible: permissionsSettings[idmKind].allowInheritResponsibles,
         };
 
-        return UIFactory.getAclApi()
-            .manageAclFields.filter((name) =>
+        return manageAclFields
+            .filter((name) =>
                 idmKindConditions[name] !== undefined ? idmKindConditions[name] : true,
             )
             .map((name) => manageAclDialogFields[name]);
-    }, [idmKind, manageAclDialogFields]);
+    }, [idmKind, manageAclDialogFields, manageAclFields]);
 
     const renderDialog = () => {
         return (
@@ -237,7 +207,6 @@ function ManageAcl(props: Props) {
                     readApprovers: prepareRoleListValue(readApprovers),
                     auditors: prepareRoleListValue(auditors),
                     bossApproval: Boolean(bossApproval),
-                    inheritAcl: Boolean(inheritAcl),
                 }}
                 formExtras={{initialValuesEqual: isEqual_}}
                 fields={[
@@ -264,7 +233,7 @@ function ManageAcl(props: Props) {
         );
     };
 
-    return (
+    return !manageAclFields?.length ? null : (
         <ErrorBoundary>
             <div className={block(null, className)}>
                 <Button onClick={handleModalOpen}>Manage responsibles</Button>

diff --git a/packages/ui/src/ui/containers/ACL/ManageInheritance/ManageInheritance.scss b/packages/ui/src/ui/containers/ACL/ManageInheritance/ManageInheritance.scss
@@ -0,0 +1,31 @@
+.acl-inheritance {
+    &__modal {
+        .g-dialog-body {
+            .g-dialog-body {
+                padding: 0;
+            }
+        }
+
+        &_loading,
+        &_error {
+            .g-dialog-body {
+                min-height: 270px;
+
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+
+        &_error {
+            .g-dialog-body {
+                display: block;
+            }
+        }
+    }
+
+    &__flag {
+        font-weight: var(--yt-font-weight-bold);
+        color: var(--secondary-text);
+    }
+}