feat: grant permissions

Author: Raubzeug

src/components/SubjectWithAvatar/SubjectWithAvatar.scss

@@ -0,0 +1,11 @@
+.ydb-subject-with-avatar {
+    &__avatar-wrapper {
+        position: relative;
+    }
+
+    &__subject {
+        overflow: hidden;
+
+        text-overflow: ellipsis;
+    }
+}

src/components/SubjectWithAvatar/SubjectWithAvatar.tsx

@@ -0,0 +1,34 @@
+import {Avatar, Flex, Text} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+
+export const block = cn('ydb-subject-with-avatar');
+
+import './SubjectWithAvatar.scss';
+
+interface SubjectProps {
+    subject: string;
+    title?: string;
+    renderIcon?: () => React.ReactNode;
+}
+
+export function SubjectWithAvatar({subject, title, renderIcon}: SubjectProps) {
+    return (
+        <Flex gap={2} alignItems="center">
+            <div className={block('avatar-wrapper')}>
+                <Avatar theme="brand" text={subject} title={subject} />
+                {renderIcon?.()}
+            </div>
+            <Flex direction="column" overflow="hidden">
+                <Text variant="body-2" className={block('subject')}>
+                    {subject}
+                </Text>
+                {title && (
+                    <Text variant="body-2" color="secondary">
+                        {title}
+                    </Text>
+                )}
+            </Flex>
+        </Flex>
+    );
+}

src/containers/Tenant/Diagnostics/AccessRights/AccessRights.scss

@@ -0,0 +1,80 @@
+.ydb-access-rights {
+    $block: &;
+    &__header {
+        position: sticky;
+        left: 0;
+
+        margin-bottom: var(--g-spacing-3);
+    }
+    &__owner-card {
+        width: max-content;
+        padding: var(--g-spacing-2) var(--g-spacing-3);
+    }
+
+    &__icon-wrapper {
+        position: absolute;
+        right: -2px;
+        bottom: -2px;
+
+        height: 16px;
+
+        color: var(--g-color-base-warning-heavy);
+        border-radius: 50%;
+        background: var(--g-color-base-background);
+        aspect-ratio: 1;
+    }
+    &__owner-divider {
+        height: 24px;
+    }
+    &__owner-description {
+        max-width: 391px;
+    }
+    &__dialog-content-wrapper {
+        position: relative;
+
+        height: 46px;
+    }
+    &__dialog-error {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        overflow: hidden;
+
+        max-width: 100%;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &__note {
+        display: flex;
+        .g-help-mark__button {
+            display: flex;
+        }
+    }
+    &__rights-wrapper {
+        position: relative;
+
+        width: 100%;
+        height: 100%;
+    }
+    &__rights-actions {
+        position: absolute;
+        right: 0;
+
+        visibility: hidden;
+
+        height: 100%;
+        padding-left: var(--g-spacing-2);
+
+        background-color: var(--ydb-data-table-color-hover);
+    }
+    &__rights-table {
+        .data-table__row:hover {
+            #{$block}__rights-actions {
+                visibility: visible;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import {PersonPlus} from '@gravity-ui/icons';
+import {Button, Flex, Icon} from '@gravity-ui/uikit';
+
+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 {useCurrentSchema} from '../../TenantContext';
+import {useTenantQueryParams} from '../../useTenantQueryParams';
+
+import {Owner} from './components/Owner';
+import {RightsTable} from './components/RightsTable/RightsTable';
+import i18n from './i18n';
+import {block} from './shared';
+
+import './AccessRights.scss';
+
+export function AccessRights() {
+    const {path, database} = useCurrentSchema();
+    const editable = useEditAccessAvailable();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const {currentData, isFetching, error} = schemaAclApi.useGetSchemaAclQuery(
+        {path, database},
+        {
+            pollingInterval: autoRefreshInterval,
+        },
+    );
+
+    const {handleShowGrantAccessChange} = useTenantQueryParams();
+
+    const loading = isFetching && !currentData;
+
+    const renderContent = () => {
+        if (error) {
+            return <ResponseError error={error} />;
+        }
+
+        return (
+            <React.Fragment>
+                <Flex
+                    gap={10}
+                    justifyContent="space-between"
+                    alignItems="start"
+                    className={block('header')}
+                >
+                    <Owner />
+                    {editable && (
+                        <Button
+                            view="action"
+                            onClick={() => {
+                                handleShowGrantAccessChange(true);
+                            }}
+                        >
+                            <Icon data={PersonPlus} />
+                            {i18n('action_grant-access')}
+                        </Button>
+                    )}
+                </Flex>
+                <RightsTable />
+            </React.Fragment>
+        );
+    };
+
+    return <LoaderWrapper loading={loading}>{renderContent()}</LoaderWrapper>;
+}

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

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import NiceModal from '@ebay/nice-modal-react';
+import {Dialog, Text, TextInput} from '@gravity-ui/uikit';
+
+import {schemaAclApi} from '../../../../../store/reducers/schemaAcl/schemaAcl';
+import createToast from '../../../../../utils/createToast';
+import {prepareErrorMessage} from '../../../../../utils/prepareErrorMessage';
+import i18n from '../i18n';
+import {block} from '../shared';
+
+const CHANGE_OWNER_DIALOG = 'change-owner-dialog';
+
+interface GetChangeOwnerDialogProps {
+    path: string;
+    database: string;
+}
+
+export async function getChangeOwnerDialog({
+    path,
+    database,
+}: GetChangeOwnerDialogProps): Promise<boolean> {
+    return await NiceModal.show(CHANGE_OWNER_DIALOG, {
+        id: CHANGE_OWNER_DIALOG,
+        path,
+        database,
+    });
+}
+
+const ChangeOwnerDialogNiceModal = NiceModal.create(
+    ({path, database}: GetChangeOwnerDialogProps) => {
+        const modal = NiceModal.useModal();
+
+        const handleClose = () => {
+            modal.hide();
+            modal.remove();
+        };
+
+        return (
+            <ChangeOwnerDialog
+                onClose={() => {
+                    modal.resolve(false);
+                    handleClose();
+                }}
+                open={modal.visible}
+                path={path}
+                database={database}
+            />
+        );
+    },
+);
+
+NiceModal.register(CHANGE_OWNER_DIALOG, ChangeOwnerDialogNiceModal);
+
+interface ChangeOwnerDialogProps extends GetChangeOwnerDialogProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+function ChangeOwnerDialog({open, onClose, path, database}: ChangeOwnerDialogProps) {
+    const [newOwner, setNewOwner] = React.useState('');
+    const [requestErrorMessage, setRequestErrorMessage] = React.useState('');
+    const [updateOwner, updateOwnerResponse] = schemaAclApi.useUpdateAccessMutation();
+
+    const handleTyping = (value: string) => {
+        setNewOwner(value);
+        setRequestErrorMessage('');
+    };
+    return (
+        <Dialog open={open} size="s" onClose={onClose}>
+            <Dialog.Header caption={i18n('action_change-owner')} />
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    updateOwner({path, database, rights: {ChangeOwnership: {Subject: newOwner}}})
+                        .unwrap()
+                        .then(() => {
+                            onClose();
+                            createToast({
+                                name: 'updateOwner',
+                                content: i18n('title_owner-changed'),
+                                autoHiding: 3000,
+                            });
+                        })
+                        .catch((error) => {
+                            setRequestErrorMessage(prepareErrorMessage(error));
+                        });
+                }}
+            >
+                <Dialog.Body>
+                    <div className={block('dialog-content-wrapper')}>
+                        <TextInput
+                            id="queryName"
+                            placeholder={i18n('decription_enter-subject')}
+                            value={newOwner}
+                            onUpdate={handleTyping}
+                            hasClear
+                            autoFocus
+                            autoComplete={false}
+                        />
+                        {requestErrorMessage && (
+                            <Text
+                                color="danger"
+                                className={block('dialog-error')}
+                                title={requestErrorMessage}
+                            >
+                                {requestErrorMessage}
+                            </Text>
+                        )}
+                    </div>
+                </Dialog.Body>
+                <Dialog.Footer
+                    textButtonCancel={i18n('action_cancel')}
+                    textButtonApply={i18n('action_apply')}
+                    onClickButtonCancel={onClose}
+                    propsButtonApply={{
+                        type: 'submit',
+                        loading: updateOwnerResponse.isLoading,
+                        disabled: !newOwner.length,
+                    }}
+                />
+            </form>
+        </Dialog>
+    );
+}

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

@@ -0,0 +1,59 @@
+import {CrownDiamond, Pencil} from '@gravity-ui/icons';
+import {ActionTooltip, Button, Card, Divider, Flex, Icon, Text} from '@gravity-ui/uikit';
+
+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 {useCurrentSchema} from '../../../TenantContext';
+import i18n from '../i18n';
+import {block} from '../shared';
+
+import {getChangeOwnerDialog} from './ChangeOwnerDialog';
+
+export function Owner() {
+    const editable = useEditAccessAvailable();
+    const {path, database} = useCurrentSchema();
+    const owner = useTypedSelector((state) => selectSchemaOwner(state, path, database));
+
+    if (!owner) {
+        return null;
+    }
+
+    const renderIcon = () => {
+        return (
+            <Flex alignItems="center" justifyContent="center" className={block('icon-wrapper')}>
+                <Icon data={CrownDiamond} size={14} className={block('avatar-icon')} />
+            </Flex>
+        );
+    };
+    return (
+        <Flex gap={4} alignItems="center">
+            <Card view="filled" className={block('owner-card')}>
+                <Flex alignItems="center" justifyContent="space-between" gap={9}>
+                    <SubjectWithAvatar
+                        subject={owner}
+                        renderIcon={renderIcon}
+                        title={i18n('title_owner')}
+                    />
+                    {editable && (
+                        <Flex gap={1} alignItems="center">
+                            <Divider className={block('owner-divider')} orientation="vertical" />
+                            <ActionTooltip title={i18n('action_change-owner')}>
+                                <Button
+                                    view="flat-secondary"
+                                    onClick={() => getChangeOwnerDialog({path, database})}
+                                >
+                                    <Icon data={Pencil} />
+                                </Button>
+                            </ActionTooltip>
+                        </Flex>
+                    )}
+                </Flex>
+            </Card>
+            <Text color="secondary" className={block('owner-description')}>
+                {i18n('description_owner')}
+            </Text>
+        </Flex>
+    );
+}