ydb-embedded-ui 4.33.0 → 5.1.0

package/dist/components/VirtualTable/reducer.ts

@@ -1,143 +0,0 @@
-import type {Reducer} from 'react';
-
-import type {IResponseError} from '../../types/api/error';
-
-import type {Chunk} from './types';
-
-const INIT_CHUNK = 'infiniteTable/INIT_CHUNK';
-const REMOVE_CHUNK = 'infiniteTable/REMOVE_CHUNK';
-const SET_CHUNK_LOADING = 'infiniteTable/SET_CHUNK_LOADING';
-const SET_CHUNK_DATA = 'infiniteTable/SET_CHUNK_DATA';
-const SET_CHUNK_ERROR = 'infiniteTable/SET_CHUNK_ERROR';
-const RESET_CHUNKS = 'infiniteTable/RESET_CHUNKS';
-
-type VirtualTableState<T> = Record<string, Chunk<T> | undefined>;
-
-// Intermediary type to pass to ReducerAction (because ReturnType cannot correctly convert generics)
-interface SetChunkDataAction<T> {
-    type: typeof SET_CHUNK_DATA;
-    data: {
-        id: string;
-        data: T[];
-    };
-}
-
-export const setChunkData = <T>(id: string, data: T[]): SetChunkDataAction<T> => {
-    return {
-        type: SET_CHUNK_DATA,
-        data: {id, data},
-    } as const;
-};
-
-export const setChunkError = (id: string, error: IResponseError) => {
-    return {
-        type: SET_CHUNK_ERROR,
-        data: {id, error},
-    } as const;
-};
-
-export const initChunk = (id: string) => {
-    return {
-        type: INIT_CHUNK,
-        data: {id},
-    } as const;
-};
-
-export const setChunkLoading = (id: string) => {
-    return {
-        type: SET_CHUNK_LOADING,
-        data: {id},
-    } as const;
-};
-
-export const removeChunk = (id: string) => {
-    return {
-        type: REMOVE_CHUNK,
-        data: {id},
-    } as const;
-};
-
-export const resetChunks = () => {
-    return {
-        type: RESET_CHUNKS,
-    } as const;
-};
-
-type VirtualTableAction<T> =
-    | SetChunkDataAction<T>
-    | ReturnType<typeof setChunkError>
-    | ReturnType<typeof initChunk>
-    | ReturnType<typeof setChunkLoading>
-    | ReturnType<typeof removeChunk>
-    | ReturnType<typeof resetChunks>;
-
-// Reducer wrapped in additional function to pass generic type
-export const createVirtualTableReducer =
-    <T>(): Reducer<VirtualTableState<T>, VirtualTableAction<T>> =>
-    (state, action) => {
-        switch (action.type) {
-            case SET_CHUNK_DATA: {
-                const {id, data} = action.data;
-
-                return {
-                    ...state,
-                    [id]: {
-                        loading: false,
-                        wasLoaded: true,
-                        active: true,
-                        data,
-                    },
-                };
-            }
-            case SET_CHUNK_ERROR: {
-                const {id, error} = action.data;
-
-                return {
-                    ...state,
-                    [id]: {
-                        loading: false,
-                        wasLoaded: true,
-                        active: true,
-                        error,
-                    },
-                };
-            }
-            case INIT_CHUNK: {
-                const {id} = action.data;
-
-                return {
-                    ...state,
-                    [id]: {
-                        loading: false,
-                        wasLoaded: false,
-                        active: true,
-                    },
-                };
-            }
-            case SET_CHUNK_LOADING: {
-                const {id} = action.data;
-
-                return {
-                    ...state,
-                    [id]: {
-                        loading: true,
-                        wasLoaded: false,
-                        active: true,
-                    },
-                };
-            }
-            case REMOVE_CHUNK: {
-                const {id} = action.data;
-
-                const newState = {...state};
-                delete newState[id];
-
-                return newState;
-            }
-            case RESET_CHUNKS: {
-                return {};
-            }
-            default:
-                return state;
-        }
-    };

package/dist/components/VirtualTable/shared.ts

@@ -1,3 +0,0 @@
-import cn from 'bem-cn-lite';
-
-export const b = cn('ydb-virtual-table');

package/dist/components/VirtualTable/types.ts

@@ -1,61 +0,0 @@
-import type {ReactNode} from 'react';
-
-import type {IResponseError} from '../../types/api/error';
-
-import {ASCENDING, CENTER, DESCENDING, LEFT, RIGHT} from './constants';
-
-export interface Chunk<T> {
-    active: boolean;
-    loading: boolean;
-    wasLoaded: boolean;
-    data?: T[];
-    error?: IResponseError;
-}
-
-export type GetChunk<T> = (id: number) => Chunk<T> | undefined;
-
-export type OnEntry = (id: string) => void;
-export type OnLeave = (id: string) => void;
-
-export type AlignType = typeof LEFT | typeof RIGHT | typeof CENTER;
-export type SortOrderType = typeof ASCENDING | typeof DESCENDING;
-
-export type SortParams = {columnId?: string; sortOrder?: SortOrderType};
-export type OnSort = (params: SortParams) => void;
-
-export interface Column<T> {
-    name: string;
-    header?: ReactNode;
-    className?: string;
-    sortable?: boolean;
-    resizeable?: boolean;
-    render: (props: {row: T; index: number}) => ReactNode;
-    width: number;
-    align: AlignType;
-}
-
-export interface VirtualTableData<T> {
-    data: T[];
-    total: number;
-    found: number;
-}
-
-export type FetchData<T> = (
-    limit: number,
-    offset: number,
-    sortParams?: SortParams,
-) => Promise<VirtualTableData<T>>;
-
-export type OnError = (error?: IResponseError) => void;
-
-interface ControlsParams {
-    totalEntities: number;
-    foundEntities: number;
-    inited: boolean;
-}
-
-export type RenderControls = (params: ControlsParams) => ReactNode;
-export type RenderEmptyDataMessage = () => ReactNode;
-export type RenderErrorMessage = (error: IResponseError) => ReactNode;
-
-export type GetRowClassName<T> = (row: T) => string | undefined;

package/dist/components/VirtualTable/useIntersectionObserver.ts

@@ -1,43 +0,0 @@
-import {useEffect, useRef} from 'react';
-
-import type {OnEntry, OnLeave} from './types';
-import {DEFAULT_INTERSECTION_OBSERVER_MARGIN} from './constants';
-
-interface UseIntersectionObserverProps {
-    onEntry: OnEntry;
-    onLeave: OnLeave;
-    /** Intersection observer calculate margins based on container element properties */
-    parentContainer?: Element | null;
-}
-
-export const useIntersectionObserver = ({
-    onEntry,
-    onLeave,
-    parentContainer,
-}: UseIntersectionObserverProps) => {
-    const observer = useRef<IntersectionObserver>();
-
-    useEffect(() => {
-        const callback = (entries: IntersectionObserverEntry[]) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    onEntry(entry.target.id);
-                } else {
-                    onLeave(entry.target.id);
-                }
-            });
-        };
-
-        observer.current = new IntersectionObserver(callback, {
-            root: parentContainer,
-            rootMargin: DEFAULT_INTERSECTION_OBSERVER_MARGIN,
-        });
-
-        return () => {
-            observer.current?.disconnect();
-            observer.current = undefined;
-        };
-    }, [parentContainer, onEntry, onLeave]);
-
-    return observer.current;
-};

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -1,271 +0,0 @@
-import React, {useState} from 'react';
-import {useDispatch} from 'react-redux';
-import {useLocation} from 'react-router';
-import {useHistory} from 'react-router-dom';
-import cn from 'bem-cn-lite';
-
-import {Icon, Button} from '@gravity-ui/uikit';
-import {AsideHeader, MenuItem as AsideHeaderMenuItem, FooterItem} from '@gravity-ui/navigation';
-
-import terminalIcon from '@gravity-ui/icons/svgs/terminal.svg';
-import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
-
-import signOutIcon from '../../assets/icons/signOut.svg';
-import signInIcon from '../../assets/icons/signIn.svg';
-import ydbLogoIcon from '../../assets/icons/ydb.svg';
-import userSecret from '../../assets/icons/user-secret.svg';
-import userChecked from '../../assets/icons/user-check.svg';
-import settingsIcon from '../../assets/icons/settings.svg';
-import supportIcon from '../../assets/icons/support.svg';
-
-import {logout} from '../../store/reducers/authentication/authentication';
-import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../store/reducers/tenant/constants';
-import routes, {TENANT, createHref, parseQuery} from '../../routes';
-import {useSetting, useTypedSelector} from '../../utils/hooks';
-import {ASIDE_HEADER_COMPACT_KEY, TENANT_INITIAL_PAGE_KEY} from '../../utils/constants';
-
-import {getTenantPath} from '../Tenant/TenantPages';
-import {UserSettings} from '../UserSettings/UserSettings';
-
-import i18n from './i18n';
-import './AsideNavigation.scss';
-
-const b = cn('kv-navigation');
-
-interface MenuItem {
-    id: string;
-    title: string;
-    icon: SVGIconData;
-    iconSize: string | number;
-    location: string;
-    locationKeys?: string[];
-}
-
-interface YbdInternalUserProps {
-    ydbUser?: string;
-    logout: VoidFunction;
-}
-
-function YbdInternalUser({ydbUser, logout}: YbdInternalUserProps) {
-    const history = useHistory();
-
-    const handleLoginClick = () => {
-        history.push(
-            createHref(routes.auth, undefined, {returnUrl: encodeURIComponent(location.href)}),
-        );
-    };
-
-    return (
-        <div className={b('internal-user')}>
-            <div className={b('user-info-wrapper')}>
-                <div className={b('ydb-internal-user-title')}>{i18n('account.user')}</div>
-                {ydbUser && <div className={b('username')}>{ydbUser}</div>}
-            </div>
-            {ydbUser ? (
-                <Button view="flat-secondary" title={i18n('account.logout')} onClick={logout}>
-                    <Icon data={signOutIcon} size={16} />
-                </Button>
-            ) : (
-                <Button
-                    view="flat-secondary"
-                    title={i18n('account.login')}
-                    onClick={handleLoginClick}
-                >
-                    <Icon data={signInIcon} size={16} />
-                </Button>
-            )}
-        </div>
-    );
-}
-
-interface YdbUserDropdownProps {
-    isCompact: boolean;
-    ydbUser: {
-        login?: string;
-        logout: VoidFunction;
-    };
-    popupAnchor: React.RefObject<HTMLDivElement>;
-}
-
-function YdbUserDropdown({isCompact, popupAnchor, ydbUser}: YdbUserDropdownProps) {
-    const [isUserDropdownVisible, setIsUserDropdownVisible] = useState(false);
-    const iconData = ydbUser?.login ? userChecked : userSecret;
-    return (
-        <FooterItem
-            compact={isCompact}
-            item={{
-                id: 'user-popup',
-                title: ydbUser?.login ?? i18n('navigation-item.account'),
-                current: isUserDropdownVisible,
-                icon: iconData,
-                iconSize: 22,
-                onItemClick: () => setIsUserDropdownVisible(true),
-            }}
-            enableTooltip={!isUserDropdownVisible}
-            popupAnchor={popupAnchor}
-            popupVisible={isUserDropdownVisible}
-            onClosePopup={() => setIsUserDropdownVisible(false)}
-            renderPopupContent={() => (
-                <div className={b('ydb-user-wrapper')}>
-                    <YbdInternalUser ydbUser={ydbUser.login} logout={ydbUser.logout} />
-                </div>
-            )}
-        />
-    );
-}
-
-interface AsideNavigationProps {
-    children: React.ReactNode;
-}
-
-enum Panel {
-    UserSettings = 'UserSettings',
-}
-
-export const useGetLeftNavigationItems = () => {
-    const location = useLocation();
-    const history = useHistory();
-
-    const [initialTenantPage, setInitialTenantPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
-    const {tenantPage = initialTenantPage} = useTypedSelector((state) => state.tenant);
-
-    const {pathname} = location;
-    const queryParams = parseQuery(location);
-
-    const isTenantPage = pathname === `/${TENANT}`;
-
-    const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => {
-        if (!isTenantPage) {
-            return [];
-        }
-
-        const items: MenuItem[] = [
-            {
-                id: TENANT_PAGES_IDS.query,
-                title: i18n('pages.query'),
-                icon: terminalIcon,
-                iconSize: 20,
-                location: getTenantPath({
-                    ...queryParams,
-                    [TENANT_PAGE]: TENANT_PAGES_IDS.query,
-                }),
-            },
-            {
-                id: TENANT_PAGES_IDS.diagnostics,
-                title: i18n('pages.diagnostics'),
-                icon: pulseIcon,
-                iconSize: 20,
-                location: getTenantPath({
-                    ...queryParams,
-                    [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
-                }),
-            },
-        ];
-
-        return items.map((item) => {
-            const current = item.id === tenantPage;
-
-            return {
-                id: item.id,
-                title: item.title,
-                icon: item.icon,
-                iconSize: item.iconSize,
-                current,
-                onItemClick: () => {
-                    setInitialTenantPage(item.id);
-                    history.push(item.location);
-                },
-            };
-        });
-    }, [tenantPage, isTenantPage, setInitialTenantPage, history, queryParams]);
-
-    return menuItems;
-};
-
-function AsideNavigation(props: AsideNavigationProps) {
-    const history = useHistory();
-    const dispatch = useDispatch();
-
-    const [visiblePanel, setVisiblePanel] = useState<Panel>();
-
-    const {user: ydbUser} = useTypedSelector((state) => state.authentication);
-    const [compact, setIsCompact] = useSetting<boolean>(ASIDE_HEADER_COMPACT_KEY);
-
-    const menuItems = useGetLeftNavigationItems();
-
-    const onLogout = () => {
-        dispatch(logout());
-    };
-
-    return (
-        <React.Fragment>
-            <AsideHeader
-                logo={{
-                    text: 'YDB',
-                    icon: ydbLogoIcon,
-                    onClick: () => history.push('/'),
-                }}
-                menuItems={menuItems}
-                compact={compact}
-                onChangeCompact={setIsCompact}
-                className={b()}
-                renderContent={() => props.children}
-                renderFooter={({compact, asideRef}) => (
-                    <React.Fragment>
-                        <FooterItem
-                            compact={compact}
-                            item={{
-                                id: 'documentation',
-                                title: i18n('navigation-item.documentation'),
-                                icon: supportIcon,
-                                iconSize: 24,
-                                onItemClick: () => {
-                                    window.open('https://ydb.tech/docs', '_blank', 'noreferrer');
-                                },
-                            }}
-                        />
-
-                        <FooterItem
-                            item={{
-                                id: 'user-settings',
-                                title: i18n('navigation-item.settings'),
-                                icon: settingsIcon,
-                                iconSize: 24,
-                                current: visiblePanel === Panel.UserSettings,
-                                onItemClick: () => {
-                                    setVisiblePanel(
-                                        visiblePanel === Panel.UserSettings
-                                            ? undefined
-                                            : Panel.UserSettings,
-                                    );
-                                },
-                            }}
-                            compact={compact}
-                        />
-
-                        <YdbUserDropdown
-                            isCompact={compact}
-                            popupAnchor={asideRef}
-                            ydbUser={{
-                                login: ydbUser,
-                                logout: onLogout,
-                            }}
-                        />
-                    </React.Fragment>
-                )}
-                panelItems={[
-                    {
-                        id: 'user-settings',
-                        visible: visiblePanel === Panel.UserSettings,
-                        content: <UserSettings />,
-                    },
-                ]}
-                onClosePanel={() => {
-                    setVisiblePanel(undefined);
-                }}
-            />
-        </React.Fragment>
-    );
-}
-
-export default AsideNavigation;

package/dist/containers/AsideNavigation/i18n/index.ts

@@ -1,11 +0,0 @@
-import {i18n, Lang} from '../../../utils/i18n';
-
-import en from './en.json';
-import ru from './ru.json';
-
-const COMPONENT = 'ydb-aside-navigation';
-
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);

package/dist/containers/Authentication/Authentication.tsx

@@ -1,152 +0,0 @@
-import {KeyboardEvent, useEffect, useState} from 'react';
-import {useDispatch} from 'react-redux';
-import {useHistory, useLocation} from 'react-router';
-import cn from 'bem-cn-lite';
-
-import {Button, TextInput, Icon, Link as ExternalLink} from '@gravity-ui/uikit';
-
-import {authenticate} from '../../store/reducers/authentication/authentication';
-import {useTypedSelector} from '../../utils/hooks';
-import {parseQuery} from '../../routes';
-
-import ydbLogoIcon from '../../assets/icons/ydb.svg';
-import showIcon from '../../assets/icons/show.svg';
-import hideIcon from '../../assets/icons/hide.svg';
-import closeIcon from '../../assets/icons/close.svg';
-
-import './Authentication.scss';
-
-const b = cn('authentication');
-
-interface AuthenticationProps {
-    closable?: boolean;
-}
-
-function Authentication({closable = false}: AuthenticationProps) {
-    const dispatch = useDispatch();
-    const history = useHistory();
-    const location = useLocation();
-
-    const {returnUrl} = parseQuery(location);
-
-    const {error} = useTypedSelector((state) => state.authentication);
-
-    const [login, setLogin] = useState('');
-    const [pass, setPass] = useState('');
-    const [loginError, setLoginError] = useState('');
-    const [passwordError, setPasswordError] = useState('');
-    const [showPassword, setShowPassword] = useState(false);
-
-    useEffect(() => {
-        if (error?.data?.error?.includes('user')) {
-            setLoginError(error.data.error);
-        }
-        if (error?.data?.error?.includes('password')) {
-            setPasswordError(error.data.error);
-        }
-    }, [error]);
-
-    const onLoginUpdate = (value: string) => {
-        setLogin(value);
-        setLoginError('');
-    };
-
-    const onPassUpdate = (value: string) => {
-        setPass(value);
-        setPasswordError('');
-    };
-
-    const onLoginClick = () => {
-        // @ts-expect-error
-        // typed dispatch required, remove error expectation after adding it
-        dispatch(authenticate(login, pass)).then(() => {
-            if (returnUrl) {
-                const decodedUrl = decodeURIComponent(returnUrl.toString());
-
-                // to prevent page reload we use router history
-                // history navigates relative to origin
-                // so we remove origin to make it work properly
-                const url = new URL(decodedUrl);
-                const path = url.pathname + url.search;
-                history.replace(path);
-            }
-        });
-    };
-
-    const onEnterClick = (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        if (e.keyCode === 13) {
-            onLoginClick();
-        }
-    };
-
-    const onClose = () => {
-        history.go(-1);
-    };
-
-    const onTogglePasswordVisibility = () => {
-        setShowPassword((prev) => !prev);
-    };
-
-    return (
-        <section className={b()}>
-            <form className={b('form-wrapper')}>
-                <div className={b('header')}>
-                    <div className={b('logo')}>
-                        <Icon data={ydbLogoIcon} size={24} />
-                        YDB
-                    </div>
-                    <ExternalLink href="http://ydb.tech/docs" target="_blank">
-                        Documentation
-                    </ExternalLink>
-                </div>
-                <h2 className={b('title')}>Sign in</h2>
-                <div className={b('field-wrapper')}>
-                    <TextInput
-                        value={login}
-                        onUpdate={onLoginUpdate}
-                        placeholder={'Username'}
-                        error={loginError}
-                        onKeyDown={onEnterClick}
-                        size="l"
-                        autoFocus
-                    />
-                </div>
-                <div className={b('field-wrapper')}>
-                    <TextInput
-                        value={pass}
-                        onUpdate={onPassUpdate}
-                        type={showPassword ? 'text' : 'password'}
-                        placeholder={'Password'}
-                        error={passwordError}
-                        onKeyDown={onEnterClick}
-                        size="l"
-                    />
-                    <Button
-                        onClick={onTogglePasswordVisibility}
-                        size="l"
-                        className={b('show-password-button')}
-                    >
-                        <Icon data={showPassword ? hideIcon : showIcon} size={16} />
-                    </Button>
-                </div>
-                <Button
-                    view="action"
-                    onClick={onLoginClick}
-                    width="max"
-                    size="l"
-                    disabled={Boolean(!login || loginError || passwordError)}
-                    className={b('button-sign-in')}
-                >
-                    Sign in
-                </Button>
-            </form>
-            {closable && history.length > 1 && (
-                <Button onClick={onClose} className={b('close')}>
-                    <Icon data={closeIcon} size={24} />
-                </Button>
-            )}
-        </section>
-    );
-}
-
-export default Authentication;