refactor: migrate Acl and SchemaViewer to ts (#481)

Author: artemmufazalov

src/containers/Tenant/Acl/Acl.js

@@ -1,6 +1,6 @@
 @import '../../../styles/mixins.scss';
 
-.kv-acl {
+.ydb-acl {
     display: flex;
     overflow: auto;
     flex-grow: 1;
@@ -16,14 +16,6 @@
         padding: 0 12px 16px;
     }
 
-    &__loader-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        height: 100%;
-    }
-
     &__owner-container {
         position: sticky;
         z-index: 2;

src/containers/Tenant/Acl/Acl.scss

@@ -0,0 +1,137 @@
+import {useDispatch} from 'react-redux';
+import {useEffect} from 'react';
+import cn from 'bem-cn-lite';
+
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import type {TACE} from '../../../types/api/acl';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+import {useTypedSelector} from '../../../utils/hooks';
+import {getSchemaAcl, setAclWasNotLoaded} from '../../../store/reducers/schemaAcl/schemaAcl';
+
+import {ResponseError} from '../../../components/Errors/ResponseError';
+import {Loader} from '../../../components/Loader';
+
+import './Acl.scss';
+import i18n from '../i18n';
+
+const b = cn('ydb-acl');
+
+const TABLE_SETTINGS = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRender: false,
+    stickyTop: 36,
+};
+
+const prepareLogin = (value: string | undefined) => {
+    if (value && value.endsWith('@staff') && !value.startsWith('svc_')) {
+        const login = value.split('@')[0];
+        return login;
+    }
+
+    return value;
+};
+
+const columns: Column<TACE>[] = [
+    {
+        name: 'AccessType',
+        header: 'Access Type',
+        sortable: false,
+        render: ({row}) => row.AccessType,
+    },
+    {
+        name: 'AccessRights',
+        header: 'Access Rights',
+        render: ({row}) => {
+            return row.AccessRights?.map((item, index) => {
+                return <div key={index}>{item}</div>;
+            });
+        },
+        sortable: false,
+    },
+    {
+        name: 'Subject',
+        sortable: false,
+        render: ({row}) => {
+            return prepareLogin(row.Subject);
+        },
+        width: 140,
+    },
+    {
+        name: 'InheritanceType',
+        header: 'Inheritance Type',
+        render: ({row}) => {
+            return row.InheritanceType?.map((item, index) => {
+                return <div key={index}>{item}</div>;
+            });
+        },
+        sortable: false,
+    },
+];
+
+export const Acl = () => {
+    const dispatch = useDispatch();
+
+    const {currentSchemaPath} = useTypedSelector((state) => state.schema);
+    const {loading, error, acl, owner, wasLoaded} = useTypedSelector((state) => state.schemaAcl);
+
+    useEffect(() => {
+        if (currentSchemaPath) {
+            dispatch(getSchemaAcl({path: currentSchemaPath}));
+        }
+
+        return () => {
+            // Ensures correct acl on path change
+            dispatch(setAclWasNotLoaded());
+        };
+    }, [currentSchemaPath, dispatch]);
+
+    const renderTable = () => {
+        if (!acl || !acl.length) {
+            return null;
+        }
+
+        return (
+            <DataTable
+                theme="yandex-cloud"
+                columns={columns}
+                data={acl}
+                settings={TABLE_SETTINGS}
+            />
+        );
+    };
+
+    const renderOwner = () => {
+        if (!owner) {
+            return null;
+        }
+
+        return (
+            <div className={b('owner-container')}>
+                <span className={b('owner-label')}>{`${i18n('acl.owner')}: `}</span>
+                {prepareLogin(owner)}
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return <Loader />;
+    }
+
+    if (error) {
+        return <ResponseError error={error} className={b('message-container')} />;
+    }
+
+    if (!loading && !acl && !owner) {
+        return <div className={b('message-container')}>{i18n('acl.empty')}</div>;
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('result')}>
+                {renderOwner()}
+                {renderTable()}
+            </div>
+        </div>
+    );
+};

src/containers/Tenant/Acl/Acl.tsx

@@ -35,12 +35,6 @@
         }
     }
 
-    &__loader {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
     &__tree-wrapper {
         display: flex;
         flex-direction: column;