ydb-embedded-ui 20.2.0 → 20.3.0

package/src/containers/Tenant/GrantAccess/components/Rights.tsx

@@ -0,0 +1,153 @@
+import {Card, Flex, Label, Switch, Text} from '@gravity-ui/uikit';
+
+import type {AvailablePermissionsConfig} from '../../../../types/api/acl';
+import i18n from '../i18n';
+import type {CommonRightsProps, RightsView} from '../shared';
+import {RightsDescription, block, isLegacyRight} from '../shared';
+
+interface RightsProps extends CommonRightsProps {
+    availablePermissions?: AvailablePermissionsConfig;
+    view: RightsView;
+}
+
+export function Rights({
+    rights,
+    availablePermissions,
+    handleChangeRightGetter,
+    inheritedRights,
+    view,
+}: RightsProps) {
+    if (view === 'Groups') {
+        return (
+            <GroupRights
+                rights={rights}
+                availablePermissions={availablePermissions?.AccessRules}
+                handleChangeRightGetter={handleChangeRightGetter}
+                inheritedRights={inheritedRights}
+            />
+        );
+    }
+    return (
+        <GranularRights
+            rights={rights}
+            availablePermissions={availablePermissions?.AccessRights}
+            handleChangeRightGetter={handleChangeRightGetter}
+            inheritedRights={inheritedRights}
+        />
+    );
+}
+
+interface GroupRightsProps extends CommonRightsProps {
+    availablePermissions: AvailablePermissionsConfig['AccessRules'];
+}
+
+function GroupRights({
+    rights,
+    availablePermissions,
+    handleChangeRightGetter,
+    inheritedRights,
+}: GroupRightsProps) {
+    if (!availablePermissions?.length) {
+        return i18n('description_no-group-permissions');
+    }
+    return (
+        <Flex gap={3} direction="column">
+            {availablePermissions.map(({Name, Mask, AccessRights = [], AccessRules = []}) => {
+                const includedRights = AccessRights.concat(AccessRules);
+                const isLegacy = isLegacyRight(Mask);
+                const isActive = rights.get(Name);
+                const isInherited = inheritedRights.has(Name);
+
+                if (isLegacy && !isActive && !isInherited) {
+                    return null;
+                }
+
+                return (
+                    <SingleRight
+                        active={isActive}
+                        key={Name}
+                        right={Name}
+                        onUpdate={handleChangeRightGetter(Name)}
+                        includedRights={includedRights}
+                        description={RightsDescription[Mask]}
+                        inherited={isInherited}
+                    />
+                );
+            })}
+        </Flex>
+    );
+}
+
+interface GranularRightsProps extends CommonRightsProps {
+    availablePermissions: AvailablePermissionsConfig['AccessRights'];
+}
+
+function GranularRights({
+    rights,
+    availablePermissions,
+    handleChangeRightGetter,
+    inheritedRights,
+}: GranularRightsProps) {
+    if (!availablePermissions?.length) {
+        return i18n('description_no-granular-permissions');
+    }
+    return (
+        <Flex gap={3} direction="column">
+            {availablePermissions.map(({Name, Mask}) => (
+                <SingleRight
+                    key={Name}
+                    active={rights.get(Name)}
+                    right={Name}
+                    onUpdate={handleChangeRightGetter(Name)}
+                    description={RightsDescription[Mask]}
+                    inherited={inheritedRights.has(Name)}
+                />
+            ))}
+        </Flex>
+    );
+}
+
+interface SingleRightProps {
+    right: string;
+    onUpdate: (value: boolean) => void;
+    active?: boolean;
+    includedRights?: string[];
+    description?: string;
+    inherited?: boolean;
+}
+
+function SingleRight({
+    right,
+    onUpdate,
+    active,
+    includedRights,
+    description,
+    inherited,
+}: SingleRightProps) {
+    const onlyInherited = inherited && !active;
+    return (
+        <Card className={block('single-right')} theme={active || inherited ? 'info' : 'normal'}>
+            <Flex justifyContent="space-between" alignItems="flex-start" gap={4}>
+                <Flex direction="column" gap={2}>
+                    <Flex direction="column">
+                        <Text variant="subheader-2">{right}</Text>
+                        {description && <Text color="secondary">{description}</Text>}
+                    </Flex>
+                    {includedRights?.length ? (
+                        <Flex wrap="wrap" gap={1}>
+                            {includedRights.map((right) => (
+                                <Label key={right} theme="unknown">
+                                    {right}
+                                </Label>
+                            ))}
+                        </Flex>
+                    ) : null}
+                </Flex>
+                <Flex direction="column" gap={2}>
+                    {inherited && <Label theme="info">{i18n('label_inherited')}</Label>}
+                    {!onlyInherited && <Switch checked={Boolean(active)} onUpdate={onUpdate} />}
+                </Flex>
+            </Flex>
+        </Card>
+    );
+}

package/src/containers/Tenant/GrantAccess/components/RightsSectionSelector.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {SegmentedRadioGroup} from '@gravity-ui/uikit';
+
+import type {AvailablePermissionsConfig} from '../../../../types/api/acl';
+import i18n from '../i18n';
+import type {RightsView} from '../shared';
+import {block} from '../shared';
+
+const RightsViewTitle: Record<RightsView, string> = {
+    Groups: i18n('label_groups'),
+    Granular: i18n('label_granular'),
+};
+
+interface RightsSectionSelectorProps {
+    value: RightsView;
+    onUpdate: (value: RightsView) => void;
+    availablePermissions?: AvailablePermissionsConfig;
+    rights: Map<string, boolean>;
+}
+
+export function RightsSectionSelector({
+    value,
+    onUpdate,
+    availablePermissions,
+    rights,
+}: RightsSectionSelectorProps) {
+    const selectedRulesCount = availablePermissions?.AccessRules?.filter((rule) =>
+        rights.get(rule.Name),
+    )?.length;
+    const selectedRightsCount = availablePermissions?.AccessRights?.filter((right) =>
+        rights.get(right.Name),
+    )?.length;
+    return (
+        <div className={block('view-selector')}>
+            <SegmentedRadioGroup value={value} onUpdate={onUpdate}>
+                <SegmentedRadioGroup.Option value={'Groups'}>
+                    {RightsViewTitle['Groups']}
+                    {selectedRulesCount ? (
+                        <React.Fragment>
+                            &nbsp;
+                            {selectedRulesCount}
+                        </React.Fragment>
+                    ) : null}
+                </SegmentedRadioGroup.Option>
+                <SegmentedRadioGroup.Option value={'Granular'}>
+                    {RightsViewTitle['Granular']}&nbsp;
+                    {selectedRightsCount ? (
+                        <React.Fragment>&nbsp;{selectedRightsCount}</React.Fragment>
+                    ) : null}
+                </SegmentedRadioGroup.Option>
+            </SegmentedRadioGroup>
+        </div>
+    );
+}

package/src/containers/Tenant/GrantAccess/components/SubjectInput.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+
+import type {FlexProps} from '@gravity-ui/uikit';
+import {Flex, Label, Text, TextInput} from '@gravity-ui/uikit';
+
+import i18n from '../i18n';
+import {block} from '../shared';
+
+const PixelsInLetter = 10;
+
+interface SubjectInputProps {
+    newSubjects: string[];
+    setNewSubjects: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+export function SubjectInput({newSubjects, setNewSubjects}: SubjectInputProps) {
+    const [renderInline, setRenderInline] = React.useState(true);
+    const [inputValue, setInputValue] = React.useState('');
+
+    const subjectInputRef = React.useRef<HTMLInputElement>(null);
+    const labelsRef = React.useRef<HTMLDivElement>(null);
+
+    const checkWidth = (additionalWidth = 0) => {
+        if (!labelsRef.current || !subjectInputRef.current) {
+            return;
+        }
+        if (
+            (labelsRef.current.offsetWidth + additionalWidth) * 2 >=
+            subjectInputRef.current.offsetWidth
+        ) {
+            setRenderInline(false);
+        } else {
+            setRenderInline(true);
+        }
+    };
+
+    const addNewAclSubject = () => {
+        if (inputValue) {
+            setNewSubjects((prev) => [...prev, inputValue]);
+            setInputValue('');
+            checkWidth(inputValue.length * PixelsInLetter);
+        }
+    };
+
+    const handleEnterClick = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            addNewAclSubject();
+        }
+    };
+
+    const handleRemoveSubjectGetter = (subject: string) => {
+        return () => {
+            setNewSubjects((prev) => prev.filter((el) => el !== subject));
+            checkWidth(-1 * subject.length * PixelsInLetter);
+        };
+    };
+
+    const renderLabels = (wrap: FlexProps['wrap'] = 'nowrap') => {
+        return (
+            <Flex
+                gap={1}
+                className={block('input-content')}
+                wrap={wrap}
+                ref={labelsRef}
+                maxWidth="100%"
+            >
+                {newSubjects.map((subject) => (
+                    <Label
+                        type="close"
+                        key={subject}
+                        onCloseClick={handleRemoveSubjectGetter(subject)}
+                    >
+                        {subject}
+                    </Label>
+                ))}
+            </Flex>
+        );
+    };
+    return (
+        <Flex direction="column" gap={2}>
+            <Flex gap={2} alignItems="start">
+                <label htmlFor="subjectInput">
+                    <Text
+                        as="div"
+                        whiteSpace="nowrap"
+                        color="secondary"
+                        className={block('subject-input-label')}
+                    >
+                        {i18n('label_grant-access-to')}
+                    </Text>
+                </label>
+                <Flex direction="column" gap={1} className={block('subject-input-wrapper')}>
+                    <TextInput
+                        name="subjectInput"
+                        className={block('subject-input')}
+                        onBlur={addNewAclSubject}
+                        onKeyDown={handleEnterClick}
+                        value={inputValue}
+                        onUpdate={setInputValue}
+                        ref={subjectInputRef}
+                        startContent={renderInline ? renderLabels() : undefined}
+                        autoFocus
+                    />
+                    {!renderInline && renderLabels('wrap')}
+                </Flex>
+            </Flex>
+        </Flex>
+    );
+}

package/src/containers/Tenant/GrantAccess/i18n/en.json

@@ -0,0 +1,40 @@
+{
+  "description_select-row": "Retrieve data rows from tables using SELECT queries.",
+  "description_update-row": "Modify existing data rows with UPDATE operations.",
+  "description_erase-row": "Modify existing data rows with UPDATE operations.",
+  "description_write-attributes": "Modify object metadata and manage access permissions.",
+  "description_create-directory": "Create new subdirectories in the database namespace.",
+  "description_create-table": "Define new tables with specified schemas.",
+  "description_create-queue": "Set up new message queue instances.",
+  "description_remove-schema": "Delete database objects (tables, directories, queues).",
+  "description_alter-schema": "Modify object definitions (add/remove columns, change types).",
+  "description_create-database": "Initialize new database instances.",
+  "description_drop-database": "Permanently delete databases and all contained objects.",
+  "description_read-attributes": "View object metadata and access control lists.",
+  "description_describe-schema": "Inspect object structure and properties.",
+  "description_connect-database": "Establish connections and submit requests to the database.",
+  "description_grant-access-rights": "Delegate permissions to other users (within own privilege scope).",
+  "description_generic-read": "Read data and metadata. Basic viewing permissions for tables/objects.",
+  "description_generic-write": "Modify data and schemas. Write/delete data + alter structure.",
+  "description_generic-manage": "Create/drop databases. Infrastructure-level change.",
+  "description_generic-list": "View object metadata and schemas. For inspecting structure without data access.",
+  "description_generic-use": "Complete data operations. Modern full access excluding DB management.",
+  "description_generic-use-legacy": "[Legacy] Complete data operations. Modern full access excluding DB management.",
+  "description_generic-full": "Unrestricted system access. All permissions including DB management.",
+  "description_generic-full-legacy": "[Legacy] Unrestricted system access. All permissions including DB management.",
+
+  "label_groups": "Groups",
+  "label_granular": "Granular",
+  "label_inherited": "Inherited",
+
+  "description_no-granular-permissions": "No granular permissions available.",
+  "description_no-group-permissions": "No group permissions available.",
+
+  "action_discard": "Discard Changes",
+  "action_cancel": "Cancel",
+  "action_save": "Apply",
+
+  "label_rights-updated": "Access rights has been successfully changed",
+  "description_failed": "Failed",
+  "label_grant-access-to": "Grant access to"
+}

package/src/containers/Tenant/GrantAccess/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-grant-access';
+
+export default registerKeysets(COMPONENT, {en});

package/src/containers/Tenant/GrantAccess/shared.ts

@@ -0,0 +1,69 @@
+import {cn} from '../../../utils/cn';
+
+import i18n from './i18n';
+
+export const block = cn('ydb-grant-access');
+
+export const RightsCodes: Record<string, number> = {
+    selectRow: 1,
+    updateRow: 2,
+    eraseRow: 4,
+    writeAttributes: 16,
+    createDirectory: 32,
+    createTable: 64,
+    createQueue: 128,
+    removeSchema: 256,
+    alterSchema: 1024,
+    createDatabase: 2048,
+    dropDatabase: 4096,
+    readAttributes: 8,
+    describeSchema: 512,
+    connectDatabase: 32768,
+    grantAccessRights: 8192,
+    genericRead: 521,
+    genericWrite: 17910,
+    genericManage: 6144,
+    genericList: 520,
+    genericUse: 59391,
+    genericUseLegacy: 26623,
+    genericFull: 65535,
+    genericFullLegacy: 32767,
+};
+
+export const RightsDescription: Record<number, string> = {
+    [RightsCodes.selectRow]: i18n('description_select-row'),
+    [RightsCodes.updateRow]: i18n('description_update-row'),
+    [RightsCodes.eraseRow]: i18n('description_erase-row'),
+    [RightsCodes.writeAttributes]: i18n('description_write-attributes'),
+    [RightsCodes.createDirectory]: i18n('description_create-directory'),
+    [RightsCodes.createTable]: i18n('description_create-table'),
+    [RightsCodes.createQueue]: i18n('description_create-queue'),
+    [RightsCodes.removeSchema]: i18n('description_remove-schema'),
+    [RightsCodes.alterSchema]: i18n('description_alter-schema'),
+    [RightsCodes.createDatabase]: i18n('description_create-database'),
+    [RightsCodes.dropDatabase]: i18n('description_drop-database'),
+    [RightsCodes.readAttributes]: i18n('description_read-attributes'),
+    [RightsCodes.describeSchema]: i18n('description_describe-schema'),
+    [RightsCodes.connectDatabase]: i18n('description_connect-database'),
+    [RightsCodes.grantAccessRights]: i18n('description_grant-access-rights'),
+    [RightsCodes.genericRead]: i18n('description_generic-read'),
+    [RightsCodes.genericWrite]: i18n('description_generic-write'),
+    [RightsCodes.genericManage]: i18n('description_generic-manage'),
+    [RightsCodes.genericList]: i18n('description_generic-list'),
+    [RightsCodes.genericUse]: i18n('description_generic-use'),
+    [RightsCodes.genericUseLegacy]: i18n('description_generic-use-legacy'),
+    [RightsCodes.genericFull]: i18n('description_generic-full'),
+    [RightsCodes.genericFullLegacy]: i18n('description_generic-full-legacy'),
+};
+
+export function isLegacyRight(right: number) {
+    return right === RightsCodes.genericFullLegacy || right === RightsCodes.genericUseLegacy;
+}
+
+export interface CommonRightsProps {
+    rights: Map<string, boolean>;
+    handleChangeRightGetter: (right: string) => (value: boolean) => void;
+    inheritedRights: Set<string>;
+}
+
+export type RightsView = 'Granular' | 'Groups';

package/src/containers/Tenant/GrantAccess/utils.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import {useClusterWithProxy} from '../../../store/reducers/cluster/cluster';
+import {selectSubjectExplicitRights} from '../../../store/reducers/schemaAcl/schemaAcl';
+import {useAclSyntax, useTypedSelector} from '../../../utils/hooks';
+
+interface UseRightsProps {
+    aclSubject?: string;
+    path: string;
+    database: string;
+    databaseFullPath: string;
+}
+
+export function useRights({aclSubject, path, database, databaseFullPath}: UseRightsProps) {
+    const useMetaProxy = useClusterWithProxy();
+    const dialect = useAclSyntax();
+    const subjectExplicitRights = useTypedSelector((state) =>
+        selectSubjectExplicitRights(
+            state,
+            aclSubject ?? undefined,
+            path,
+            database,
+            databaseFullPath,
+            dialect,
+            useMetaProxy,
+        ),
+    );
+    const [explicitRightsChanges, setExplicitRightsChanges] = React.useState(
+        () => new Map<string, boolean>(),
+    );
+    const rightsToGrant = React.useMemo(() => {
+        return Array.from(explicitRightsChanges.entries()).reduce<string[]>(
+            (acc, [right, status]) => {
+                if (status && !subjectExplicitRights.includes(right)) {
+                    acc.push(right);
+                }
+                return acc;
+            },
+            [],
+        );
+    }, [explicitRightsChanges, subjectExplicitRights]);
+
+    const rightsToRevoke = React.useMemo(() => {
+        return Array.from(explicitRightsChanges.entries()).reduce<string[]>(
+            (acc, [right, status]) => {
+                if (!status && subjectExplicitRights.includes(right)) {
+                    acc.push(right);
+                }
+                return acc;
+            },
+            [],
+        );
+    }, [explicitRightsChanges, subjectExplicitRights]);
+
+    const subjectExplicitRightsMap = React.useMemo(() => {
+        return new Map(subjectExplicitRights.map((right) => [right, true]));
+    }, [subjectExplicitRights]);
+
+    const currentRightsMap = React.useMemo(() => {
+        const rights = new Map(subjectExplicitRightsMap);
+        explicitRightsChanges.forEach((value, key) => {
+            rights.set(key, value);
+        });
+        return rights;
+    }, [subjectExplicitRightsMap, explicitRightsChanges]);
+
+    const hasChanges = React.useMemo(() => {
+        return Boolean(rightsToGrant.length || rightsToRevoke.length);
+    }, [rightsToGrant, rightsToRevoke]);
+
+    return {
+        currentRightsMap,
+        setExplicitRightsChanges,
+        rightsToGrant,
+        rightsToRevoke,
+        hasChanges,
+    };
+}

package/src/containers/Tenant/Healthcheck/Healthcheck.scss

@@ -0,0 +1,155 @@
+@use '../../../styles/mixins';
+
+.ydb-healthcheck {
+    &__stub-wrapper {
+        margin: auto;
+    }
+    &__control-wrapper {
+        width: max-content;
+    }
+    &__controls {
+        position: sticky;
+        z-index: 1;
+        top: 0;
+        left: 0;
+
+        padding: var(--g-spacing-4);
+
+        background-color: var(--g-color-base-background);
+    }
+    &__controls_fullscreen {
+        padding-right: calc(var(--g-spacing-7) * 2);
+    }
+    &__issues {
+        padding: 0 var(--g-spacing-4) var(--g-spacing-4) var(--g-spacing-4);
+    }
+
+    &__animation-container {
+        overflow: hidden;
+
+        min-height: 0;
+    }
+    &__issue-wrapper {
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-s);
+        .g-disclosure_enter_active {
+            display: grid;
+
+            animation: disclosure-expanded 0.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+        }
+        .g-disclosure_exit_active {
+            display: grid;
+
+            animation: disclosure-collapsed 0.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+        }
+    }
+    &__disclosure-trigger {
+        width: 100%;
+        @include mixins.button-reset();
+
+        &:focus-visible {
+            border-radius: var(--g-border-radius-s);
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: -2px;
+        }
+    }
+    &__issue-summary {
+        padding: var(--g-spacing-4);
+
+        cursor: pointer;
+
+        border-radius: var(--g-border-radius-s);
+
+        &:hover {
+            background-color: var(--g-color-base-generic-ultralight);
+        }
+    }
+    &__issue-summary_with-assistant {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        gap: var(--g-spacing-2);
+    }
+    &__issue-action {
+        flex: 0 0 auto;
+    }
+    &__issue-message {
+        flex: 1 1 auto;
+
+        min-width: 0;
+    }
+    &__issue-chevron {
+        display: flex;
+        flex: 0 0 auto;
+
+        padding: var(--g-spacing-1);
+
+        @include mixins.button-reset();
+
+        &:focus-visible {
+            border-radius: var(--g-border-radius-s);
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: -2px;
+        }
+    }
+    &__issue-status {
+        text-align: start;
+    }
+    &__issue-content {
+        --g-definition-list-item-gap: var(--g-spacing-3);
+        width: 100%;
+    }
+    &__issue-divider {
+        height: 28px;
+    }
+    &__issue-tab {
+        cursor: pointer;
+        &_active {
+            color: var(--g-color-text-primary);
+        }
+    }
+
+    &__tab-status {
+        height: 6px;
+
+        border-radius: 50%;
+        background-color: var(--g-color-text-misc);
+        aspect-ratio: 1;
+    }
+    &__tab-status_green {
+        background-color: var(--g-color-text-positive);
+    }
+    &__tab-status_blue {
+        background-color: var(--g-color-text-info);
+    }
+    &__tab-status_yellow {
+        background-color: var(--g-color-text-warning);
+    }
+    &__tab-status_orange {
+        background-color: var(--g-color-text-warning-heavy);
+    }
+    &__tab-status_red {
+        background-color: var(--g-color-text-danger);
+    }
+    &__issue-details {
+        padding: 0 var(--g-spacing-4) var(--g-spacing-4) var(--g-spacing-4);
+    }
+}
+
+@keyframes disclosure-expanded {
+    0% {
+        grid-template-rows: 0fr;
+    }
+    100% {
+        grid-template-rows: 1fr;
+    }
+}
+
+@keyframes disclosure-collapsed {
+    0% {
+        grid-template-rows: 1fr;
+    }
+    100% {
+        grid-template-rows: 0fr;
+    }
+}