ydb-embedded-ui 4.32.0 → 5.0.0

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.32.0",
+  "version": "5.0.0",
   "files": [
     "dist"
   ],
+  "main": "dist/lib.js",
   "repository": {
     "type": "git",
     "url": "git@github.com:ydb-platform/ydb-embedded-ui.git"
@@ -14,52 +15,52 @@
     "@gravity-ui/components": "^2.9.1",
     "@gravity-ui/date-utils": "^1.1.1",
     "@gravity-ui/i18n": "^1.0.0",
+    "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/navigation": "^1.8.0",
     "@gravity-ui/paranoid": "^1.4.0",
     "@gravity-ui/react-data-table": "^1.0.3",
-    "@types/numeral": "^2.0.2",
-    "@types/qs": "^6.9.7",
-    "@types/react": "^17.0.58",
-    "axios": "0.19.2",
-    "bem-cn-lite": "4.0.0",
+    "@gravity-ui/uikit": "^5.24.0",
+    "axios": "^0.21.2",
+    "bem-cn-lite": "^4.1.0",
     "copy-to-clipboard": "^3.3.3",
     "crc-32": "^1.2.2",
-    "history": "4.10.1",
-    "js-cookie": "2.2.1",
-    "lodash": "4.17.11",
-    "monaco-editor": "0.24.0",
-    "numeral": "2.0.6",
-    "path-to-regexp": "3.0.0",
+    "history": "^4.10.1",
+    "lodash": "^4.17.11",
+    "monaco-editor": "^0.31.1",
+    "numeral": "^2.0.6",
+    "path-to-regexp": "^3.0.0",
     "qs": "^6.11.0",
     "react-error-boundary": "^4.0.12",
-    "react-json-inspector": "7.1.1",
-    "react-list": "0.8.11",
-    "react-monaco-editor": "0.30.1",
-    "react-redux": "7.2.6",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
-    "react-scripts": "5.0.1",
-    "react-split": "2.0.14",
-    "redux": "4.0.1",
-    "redux-location-state": "2.6.0",
-    "redux-thunk": "2.3.0",
-    "reselect": "4.1.6",
-    "sass": "1.32.8",
+    "react-json-inspector": "^7.1.1",
+    "react-list": "^0.8.11",
+    "react-monaco-editor": "^0.47.0",
+    "react-redux": "^7.2.6",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.3.0",
+    "react-split": "^2.0.14",
+    "redux": "^4.0.1",
+    "redux-location-state": "^2.6.0",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.1.6",
     "url": "^0.11.0",
     "use-query-params": "^2.2.1",
-    "web-vitals": "1.1.2",
+    "web-vitals": "^1.1.2",
     "ydb-ui-components": "^3.6.0"
   },
   "scripts": {
     "start": "react-app-rewired start",
-    "dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://localhost:8765 npm start",
+    "dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://localhost:8765 REACT_APP_META_BACKEND=undefined npm start",
     "build": "rm -rf build && DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
     "//build:embedded": "echo 'PUBLIC_URL is a setting for create-react-app. Embedded version is built and hosted as is on ydb servers, with no way of knowing the final URL pattern. PUBLIC_URL=. keeps paths to all static relative, allowing servers to handle them as needed'",
-    "build:embedded": "GENERATE_SOURCEMAP=false PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 npm run build",
+    "build:embedded": "GENERATE_SOURCEMAP=false PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 REACT_APP_META_BACKEND=undefined npm run build",
     "build:embedded:archive": "npm run build:embedded && mv build embedded-ui && zip -r embedded-ui.zip embedded-ui && rm -rf embedded-ui",
-    "lint:styles": "stylelint 'src/**/*.scss'",
+    "lint": "run-p lint:*",
+    "lint:js": "eslint  --ext .js,.jsx,.ts,.tsx .",
+    "lint:styles": "stylelint 'src/**/*.{css,scss}'",
+    "lint:other": "npm run prettier -- --check",
+    "prettier": "prettier --check '**/*.{json,yaml,yml,md}'",
     "unimported": "npx unimported --no-cache",
-    "package": "rm -rf dist && copyfiles -u 1 'src/**/*' dist",
+    "package": "rm -rf dist && tsc -p tsconfig.package.json && copyfiles -u 1 'src/**/*.{css,scss,svg}' dist",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "prepublishOnly": "npm run package",
@@ -69,13 +70,13 @@
     "test:e2e": "npx playwright test --config=playwright.config.ts"
   },
   "lint-staged": {
-    "*.{scss}": [
+    "*.{scss, css}": [
       "stylelint --fix --quiet"
     ],
     "*.{js,jsx,ts,tsx}": [
       "eslint --fix --quiet"
     ],
-    "*.{json}": [
+    "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
   },
@@ -116,34 +117,45 @@
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@gravity-ui/eslint-config": "^1.0.2",
-    "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.24.0",
     "@playwright/test": "^1.31.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "@types/lodash": "^4.14.178",
+    "@types/numeral": "^2.0.2",
+    "@types/qs": "^6.9.7",
+    "@types/react": "^17.0.58",
     "@types/react-dom": "^17.0.11",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.2",
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^8.3.0",
+    "http-proxy-middleware": "^2.0.6",
     "husky": "^7.0.4",
     "jest-transform-css": "^4.0.1",
     "lint-staged": "^12.3.7",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.6",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-app-rewired": "^2.1.11",
     "react-dom": "^17.0.2",
+    "react-scripts": "^5.0.1",
+    "sass": "^1.32.8",
     "stylelint": "^14.3.0",
     "ts-jest": "^28.0.7",
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^5.24.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "overrides": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "redux": "^4.0.1"
   }
 }

package/dist/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -1,55 +0,0 @@
-import cn from 'bem-cn-lite';
-
-import type {TSystemStateInfo} from '../../types/api/nodes';
-import type {AdditionalNodesProps} from '../../types/additionalProps';
-
-import EntityStatus from '../EntityStatus/EntityStatus';
-import {Tags} from '../Tags';
-import {Icon} from '../Icon';
-
-import './BasicNodeViewer.scss';
-
-const b = cn('basic-node-viewer');
-
-interface BasicNodeViewerProps {
-    node: TSystemStateInfo;
-    additionalNodesProps?: AdditionalNodesProps;
-    className?: string;
-}
-
-export const BasicNodeViewer = ({node, additionalNodesProps, className}: BasicNodeViewerProps) => {
-    const nodeHref = additionalNodesProps?.getNodeRef
-        ? additionalNodesProps.getNodeRef(node) + 'internal'
-        : undefined;
-
-    return (
-        <div className={b(null, className)}>
-            {node ? (
-                <>
-                    <div className={b('title')}>Node</div>
-                    <EntityStatus status={node.SystemState} name={node.Host} />
-                    {nodeHref && (
-                        <a
-                            rel="noopener noreferrer"
-                            className={b('link', {external: true})}
-                            href={nodeHref}
-                            target="_blank"
-                        >
-                            <Icon name="external" />
-                        </a>
-                    )}
-
-                    <div className={b('id')}>
-                        <label className={b('label')}>NodeID</label>
-                        <label>{node.NodeId}</label>
-                    </div>
-
-                    {node.DataCenter && <Tags tags={[node.DataCenter]} />}
-                    {node.Roles && <Tags tags={node.Roles} tagsType="blue" />}
-                </>
-            ) : (
-                <div className="error">no data</div>
-            )}
-        </div>
-    );
-};

package/dist/components/CellWithPopover/CellWithPopover.tsx

@@ -1,26 +0,0 @@
-import cn from 'bem-cn-lite';
-
-import {Popover, type PopoverProps} from '@gravity-ui/uikit';
-
-import './CellWithPopover.scss';
-
-const b = cn('ydb-cell-with-popover');
-
-interface CellWithPopoverProps extends PopoverProps {
-    wrapperClassName?: string;
-}
-
-export function CellWithPopover({
-    children,
-    className,
-    wrapperClassName,
-    ...props
-}: CellWithPopoverProps) {
-    return (
-        <div className={b(null, wrapperClassName)}>
-            <Popover className={b('popover', className)} {...props}>
-                {children}
-            </Popover>
-        </div>
-    );
-}

package/dist/components/CircularProgressBar/CircularProgressBar.tsx

@@ -1,59 +0,0 @@
-import cn from 'bem-cn-lite';
-import type {ReactNode} from 'react';
-
-import type {MetricStatus} from '../../store/reducers/tenants/types';
-import {normalizeProgress} from '../../store/reducers/tenants/utils';
-
-import './CircularProgressBar.scss';
-
-const b = cn('ydb-circular-progress-bar');
-
-interface CircularProgressBarProps {
-    size?: number;
-    progress?: number;
-    strokeWidth?: number;
-    content?: ReactNode;
-    status?: MetricStatus;
-    circleBgClassName?: string;
-}
-
-export function CircularProgressBar({
-    size = 100,
-    progress = 0,
-    strokeWidth = 10,
-    content,
-    status,
-    circleBgClassName,
-}: CircularProgressBarProps) {
-    const center = size / 2;
-
-    const radius = size / 2 - strokeWidth / 2;
-    const circumference = 2 * Math.PI * radius;
-
-    const normalizedProgress = normalizeProgress(progress);
-
-    const offset = ((100 - normalizedProgress) / 100) * circumference;
-    return (
-        <div className={b('wrapper')}>
-            {content && <div className={b('content')}>{content}</div>}
-            <svg className={b()} width={size} height={size}>
-                <circle
-                    className={b('circle-bg', circleBgClassName)}
-                    cx={center}
-                    cy={center}
-                    r={radius}
-                    strokeWidth={strokeWidth}
-                />
-                <circle
-                    className={b('circle', {status: status?.toLocaleLowerCase()})}
-                    cx={center}
-                    cy={center}
-                    r={radius}
-                    strokeWidth={strokeWidth}
-                    strokeDasharray={circumference}
-                    strokeDashoffset={offset}
-                />
-            </svg>
-        </div>
-    );
-}

package/dist/components/ClipboardButton/ClipboardButton.tsx

@@ -1,52 +0,0 @@
-import {
-    Button,
-    ButtonProps,
-    ClipboardIcon,
-    CopyToClipboard as CopyToClipboardUiKit,
-    CopyToClipboardStatus,
-    Tooltip,
-} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-
-const b = cn('clipboard-button');
-
-interface ClipboardButtonProps extends Pick<ButtonProps, 'disabled' | 'size' | 'title' | 'view'> {
-    className?: string;
-    text: string;
-}
-
-/**
- * An inner component required
- * because `react-copy-to-clipboard` doesn't work with `Tooltip` otherwise.
- */
-function InnerButton({
-    className,
-    status,
-    title,
-    ...props
-}: Omit<ClipboardButtonProps, 'text'> & {status: CopyToClipboardStatus}) {
-    return (
-        <Tooltip
-            content={status === CopyToClipboardStatus.Success ? 'Copied!' : title || 'Copy'}
-            /**
-             * Auto-placement has a bug with text changing.
-             * @link https://github.com/ydb-platform/ydb-embedded-ui/pull/648#discussion_r1453530092
-             */
-            placement="bottom-start"
-        >
-            <Button {...props} className={b(null, className)}>
-                <Button.Icon>
-                    <ClipboardIcon status={status} size={16} />
-                </Button.Icon>
-            </Button>
-        </Tooltip>
-    );
-}
-
-export function ClipboardButton({text, ...props}: ClipboardButtonProps) {
-    return (
-        <CopyToClipboardUiKit text={text} timeout={1000}>
-            {(status) => <InnerButton {...props} status={status} />}
-        </CopyToClipboardUiKit>
-    );
-}

package/dist/components/ContentWithPopup/ContentWithPopup.tsx

@@ -1,51 +0,0 @@
-import {ReactNode, useRef, useState} from 'react';
-
-import {Popup, PopupProps} from '@gravity-ui/uikit';
-
-interface ContentWithPopupProps extends PopupProps {
-    content: ReactNode;
-    className?: string;
-    children?: ReactNode;
-}
-
-export const ContentWithPopup = ({
-    children,
-    content,
-    className,
-    hasArrow = true,
-    placement = ['top', 'bottom'],
-    ...props
-}: ContentWithPopupProps) => {
-    const [isPopupVisible, setIsPopupVisible] = useState(false);
-    const anchor = useRef(null);
-
-    const showPopup = () => {
-        setIsPopupVisible(true);
-    };
-
-    const hidePopup = () => {
-        setIsPopupVisible(false);
-    };
-
-    return (
-        <>
-            <Popup
-                anchorRef={anchor}
-                open={isPopupVisible}
-                placement={placement}
-                hasArrow={hasArrow}
-                {...props}
-            >
-                {content}
-            </Popup>
-            <span
-                className={className}
-                ref={anchor}
-                onMouseEnter={showPopup}
-                onMouseLeave={hidePopup}
-            >
-                {children}
-            </span>
-        </>
-    );
-};

package/dist/components/CriticalActionDialog/CriticalActionDialog.tsx

@@ -1,61 +0,0 @@
-import {FormEvent, useState} from 'react';
-import cn from 'bem-cn-lite';
-import {Dialog} from '@gravity-ui/uikit';
-
-import {Icon} from '../Icon';
-
-import './CriticalActionDialog.scss';
-
-const b = cn('ydb-critical-dialog');
-
-interface CriticalActionDialogProps {
-    visible: boolean;
-    text: string;
-    onClose: VoidFunction;
-    onConfirm: () => Promise<unknown>;
-    onConfirmActionFinish: VoidFunction;
-}
-
-export const CriticalActionDialog = ({
-    visible,
-    text,
-    onClose,
-    onConfirm,
-    onConfirmActionFinish,
-}: CriticalActionDialogProps) => {
-    const [isLoading, setIsLoading] = useState(false);
-
-    const onSubmit = async (e: FormEvent) => {
-        e.preventDefault();
-        setIsLoading(true);
-
-        return onConfirm().then(() => {
-            onConfirmActionFinish();
-            setIsLoading(false);
-            onClose();
-        });
-    };
-
-    return (
-        <Dialog open={visible} hasCloseButton={false} className={b()} size="s" onClose={onClose}>
-            <form onSubmit={onSubmit}>
-                <Dialog.Body className={b('body')}>
-                    <span className={b('warning-icon')}>
-                        <Icon name="dialog-warning" width="24" height="22" viewBox="0 0 24 22" />
-                    </span>
-                    {text}
-                </Dialog.Body>
-
-                <Dialog.Footer
-                    loading={isLoading}
-                    preset="default"
-                    textButtonApply="Confirm"
-                    textButtonCancel="Cancel"
-                    propsButtonApply={{type: 'submit'}}
-                    onClickButtonCancel={onClose}
-                    onClickButtonApply={() => {}}
-                />
-            </form>
-        </Dialog>
-    );
-};

package/dist/components/DateRange/DateRange.tsx

@@ -1,75 +0,0 @@
-import {ChangeEventHandler} from 'react';
-import cn from 'bem-cn-lite';
-
-import './DateRange.scss';
-
-const b = cn('date-range');
-
-export interface DateRangeValues {
-    /** ms from epoch */
-    from?: number;
-    /** ms from epoch */
-    to?: number;
-}
-
-interface DateRangeProps extends DateRangeValues {
-    className?: string;
-    onChange?: (value: DateRangeValues) => void;
-}
-
-const toTimezonelessISOString = (timestamp?: number) => {
-    if (!timestamp || isNaN(timestamp)) {
-        return undefined;
-    }
-
-    // shift by local offset to treat toISOString output as local time
-    const shiftedTimestamp = timestamp - new Date().getTimezoneOffset() * 60 * 1000;
-    return new Date(shiftedTimestamp).toISOString().substring(0, 'yyyy-MM-DDThh:mm'.length);
-};
-
-export const DateRange = ({from, to, className, onChange}: DateRangeProps) => {
-    const handleFromChange: ChangeEventHandler<HTMLInputElement> = ({target: {value}}) => {
-        let newFrom = value ? new Date(value).getTime() : undefined;
-
-        // some browsers allow selecting time after the boundary specified in `max`
-        if (newFrom && to && newFrom > to) {
-            newFrom = to;
-        }
-
-        onChange?.({from: newFrom, to});
-    };
-
-    const handleToChange: ChangeEventHandler<HTMLInputElement> = ({target: {value}}) => {
-        let newTo = value ? new Date(value).getTime() : undefined;
-
-        // some browsers allow selecting time before the boundary specified in `min`
-        if (from && newTo && from > newTo) {
-            newTo = from;
-        }
-
-        onChange?.({from, to: newTo});
-    };
-
-    const startISO = toTimezonelessISOString(from);
-    const endISO = toTimezonelessISOString(to);
-
-    return (
-        <div className={b(null, className)}>
-            <input
-                type="datetime-local"
-                value={startISO || ''}
-                max={endISO}
-                onChange={handleFromChange}
-                className={b('input')}
-            />
-            —
-            <input
-                type="datetime-local"
-                min={startISO}
-                value={endISO || ''}
-                onChange={handleToChange}
-                className={b('input')}
-            />
-        </div>
-    );
-};

package/dist/components/DiagnosticCard/DiagnosticCard.tsx

@@ -1,16 +0,0 @@
-import type {ReactNode} from 'react';
-import cn from 'bem-cn-lite';
-
-import './DiagnosticCard.scss';
-
-const b = cn('ydb-diagnostic-card');
-
-interface DiagnosticCardProps {
-    children?: ReactNode;
-    className?: string;
-    active?: boolean;
-}
-
-export function DiagnosticCard({children, className, active}: DiagnosticCardProps) {
-    return <div className={b({active}, className)}>{children}</div>;
-}

package/dist/components/Divider/Divider.tsx

@@ -1,11 +0,0 @@
-import cn from 'bem-cn-lite';
-
-import './Divider.scss';
-
-const b = cn('kv-divider');
-
-function Divider() {
-    return <div className={b()}></div>;
-}
-
-export default Divider;

package/dist/components/EmptyState/EmptyState.tsx

@@ -1,55 +0,0 @@
-import {ReactNode} from 'react';
-import cn from 'bem-cn-lite';
-
-import {Icon} from '../Icon';
-
-import './EmptyState.scss';
-
-const block = cn('empty-state');
-
-const sizes = {
-    s: 150,
-    m: 250,
-    l: 350,
-};
-
-export interface EmptyStateProps {
-    title: string;
-    image?: ReactNode;
-    description?: ReactNode;
-    actions?: ReactNode[];
-    size?: keyof typeof sizes;
-    position?: 'left' | 'center';
-}
-
-export const EmptyState = ({
-    image,
-    title,
-    description,
-    actions,
-    size = 'm',
-    position = 'center',
-}: EmptyStateProps) => {
-    return (
-        <div className={block({size})}>
-            <div className={block('wrapper', {size, position})}>
-                <div className={block('image')}>
-                    {image ? (
-                        image
-                    ) : (
-                        <Icon
-                            viewBox="0 0 383 396"
-                            name="emptyState"
-                            width={sizes[size]}
-                            height={sizes[size]}
-                        />
-                    )}
-                </div>
-
-                <div className={block('title', {size})}>{title}</div>
-                <div className={block('description')}>{description}</div>
-                <div className={block('actions')}>{actions}</div>
-            </div>
-        </div>
-    );
-};

package/dist/components/EnableFullscreenButton/EnableFullscreenButton.tsx

@@ -1,27 +0,0 @@
-import {Button} from '@gravity-ui/uikit';
-import {useDispatch} from 'react-redux';
-import {enableFullscreen} from '../../store/reducers/fullscreen';
-import {Icon} from '../Icon';
-
-interface EnableFullscreenButtonProps {
-    disabled?: boolean;
-}
-
-function EnableFullscreenButton({disabled}: EnableFullscreenButtonProps) {
-    const dispatch = useDispatch();
-    const onEnableFullscreen = () => {
-        dispatch(enableFullscreen());
-    };
-    return (
-        <Button
-            onClick={onEnableFullscreen}
-            view="flat-secondary"
-            disabled={disabled}
-            title="Fullscreen"
-        >
-            <Icon name="enableFullscreen" viewBox={'0 0 16 16'} height={16} width={16} />
-        </Button>
-    );
-}
-
-export default EnableFullscreenButton;