refactor: refactor test body using GravityUI (#573)

* refactor: refactor test body using GravityUI

babel.config.json

@@ -4,7 +4,7 @@
     ],
     "presets": [
         "@babel/preset-react",
-        ["@babel/preset-env", { "modules": "commonjs"}],
+        ["@babel/preset-env", { "modules": "auto"}],
         "@babel/preset-typescript"
     ],
     "sourceMaps": true,

lib/constants/checked-statuses.js

@@ -1,7 +1,5 @@
 'use strict';
 
-module.exports = {
-    UNCHECKED: 0,
-    INDETERMINATE: 0.5,
-    CHECKED: 1
-};
+export const UNCHECKED = 0;
+export const INDETERMINATE = 0.5;
+export const CHECKED = 1;

lib/constants/expand-modes.js

@@ -1,8 +1,6 @@
 'use strict';
 
-module.exports = {
-    EXPAND_ALL: 'all',
-    COLLAPSE_ALL: 'none',
-    EXPAND_ERRORS: 'errors',
-    EXPAND_RETRIES: 'retries'
-};
+export const EXPAND_ALL = 'all';
+export const COLLAPSE_ALL = 'none';
+export const EXPAND_ERRORS = 'errors';
+export const EXPAND_RETRIES = 'retries';

lib/db-utils/client.js

@@ -1,14 +1,14 @@
 'use strict';
 /* eslint-env browser */
 
-const {isEmpty} = require('lodash');
+import {isEmpty} from 'lodash';
 /** @type Record<string, (...args: unknown[]) => unknown> */
-const commonSqliteUtils = require('./common');
-const {fetchFile, normalizeUrls} = require('../common-utils');
+import commonSqliteUtils, {handleDatabases, mergeTables, compareDatabaseRowsByTimestamp, selectAllQuery} from './common';
+import {fetchFile, normalizeUrls} from '../common-utils';
 
-const {DB_SUITES_TABLE_NAME, LOCAL_DATABASE_NAME} = require('../constants/database');
+import {DB_SUITES_TABLE_NAME, LOCAL_DATABASE_NAME} from '../constants/database';
 
-function fetchDataFromDatabases(dbJsonUrls) {
+export function fetchDataFromDatabases(dbJsonUrls) {
     const loadDbJsonUrl = (dbJsonUrl) => fetchFile(dbJsonUrl);
     const prepareUrls = (urls, baseUrl) => normalizeUrls(urls, baseUrl);
 
@@ -22,10 +22,10 @@ function fetchDataFromDatabases(dbJsonUrls) {
         return {url: dbUrl, status, data};
     };
 
-    return commonSqliteUtils.handleDatabases(dbJsonUrls, {loadDbJsonUrl, prepareUrls, formatData, loadDbUrl});
+    return handleDatabases(dbJsonUrls, {loadDbJsonUrl, prepareUrls, formatData, loadDbUrl});
 }
 
-async function mergeDatabases(dataForDbs) {
+export async function mergeDatabases(dataForDbs) {
     const SQL = await window.initSqlJs();
 
     const fetchedDataArray = dataForDbs.map(data => new Uint8Array(data));
@@ -44,7 +44,7 @@ async function mergeDatabases(dataForDbs) {
     const mergedDbConnection = new SQL.Database(undefined, sumOfChunkSizes);
     const dbPaths = connections.map(db => db.filename);
 
-    commonSqliteUtils.mergeTables({db: mergedDbConnection, dbPaths, getExistingTables: (statement) => {
+    mergeTables({db: mergedDbConnection, dbPaths, getExistingTables: (statement) => {
         const tables = [];
 
         while (statement.step()) {
@@ -59,7 +59,7 @@ async function mergeDatabases(dataForDbs) {
     return mergedDbConnection;
 }
 
-async function connectToDatabase(dbUrl) {
+export async function connectToDatabase(dbUrl) {
     const mainDatabaseUrl = new URL(dbUrl);
     const {data} = await fetchFile(mainDatabaseUrl.href, {
         responseType: 'arraybuffer'
@@ -69,22 +69,22 @@ async function connectToDatabase(dbUrl) {
     return new SQL.Database(new Uint8Array(data));
 }
 
-function getMainDatabaseUrl() {
+export function getMainDatabaseUrl() {
     return new URL(LOCAL_DATABASE_NAME, window.location.href);
 }
 
-function getSuitesTableRows(db) {
+export function getSuitesTableRows(db) {
     const databaseRows = getTableRows(db, DB_SUITES_TABLE_NAME);
 
     if (isEmpty(databaseRows)) {
         return;
     }
 
-    return databaseRows.values.sort(commonSqliteUtils.compareDatabaseRowsByTimestamp);
+    return databaseRows.values.sort(compareDatabaseRowsByTimestamp);
 }
 
-function getTableRows(db, tableName) {
-    const [databaseRows] = db.exec(commonSqliteUtils.selectAllQuery(tableName));
+export function getTableRows(db, tableName) {
+    const [databaseRows] = db.exec(selectAllQuery(tableName));
 
     if (!databaseRows) {
         console.warn(`Table "${tableName}" is empty`);
@@ -95,11 +95,12 @@ function getTableRows(db, tableName) {
     return databaseRows;
 }
 
-function closeDatabase(db) {
+export function closeDatabase(db) {
     db.close();
 }
 
-module.exports = {
+export * from './common';
+export default {
     ...commonSqliteUtils,
     fetchDataFromDatabases,
     mergeDatabases,

lib/history-utils.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const {isEmpty} = require('lodash');
+import {isEmpty} from 'lodash';
 
 const formatDuration = (d) => `<- ${d}ms`;
 
@@ -21,7 +21,7 @@ const traverseNodes = (nodes, traverseCb, depth = 0) => {
     });
 };
 
-const getCommandsHistory = (history) => {
+export const getCommandsHistory = (history) => {
     if (isEmpty(history)) {
         return [];
     }
@@ -50,6 +50,6 @@ const getCommandsHistory = (history) => {
     }
 };
 
-module.exports = {
+export default {
     getCommandsHistory
 };

lib/static/components/bullet.jsx

@@ -1,24 +1,31 @@
 import React from 'react';
 import classNames from 'classnames';
-import {Checkbox} from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import {isCheckboxChecked, isCheckboxIndeterminate} from '../../common-utils';
 import {CHECKED, INDETERMINATE, UNCHECKED} from '../../constants/checked-statuses';
 import useLocalStorage from '../hooks/useLocalStorage';
+import {Checkbox} from '@gravity-ui/uikit';
+import {ChevronUp} from '@gravity-ui/icons';
 
 const Bullet = ({status, onClick, className}) => {
     const [isCheckbox] = useLocalStorage('showCheckboxes', false);
 
+    const handleClick = React.useCallback((e) => {
+        e.stopPropagation();
+        onClick(e);
+    });
+
     if (!isCheckbox) {
-        return <span className={classNames('bullet_type-simple', className)} />;
+        return <div className='bullet-container'><ChevronUp className={classNames(className, 'bullet_type-simple')}/></div>;
     }
 
-    return <Checkbox
-        className={classNames('bullet_type-checkbox', className)}
-        checked={isCheckboxChecked(status)}
-        indeterminate={isCheckboxIndeterminate(status)}
-        onClick={onClick}
-    />;
+    return <div onClick={handleClick} className='bullet-container'>
+        <Checkbox
+            className={classNames('bullet_type-checkbox', className)}
+            checked={isCheckboxChecked(status)}
+            indeterminate={isCheckboxIndeterminate(status)}
+        />
+    </div>;
 };
 
 Bullet.propTypes = {

lib/static/components/controls/browser-list/index.styl

@@ -16,6 +16,7 @@
         flex 1 1 auto
 
     .action-button
+        width 60px
         opacity 0
 
 .g-select-list__option:hover

lib/static/components/controls/find-same-diffs-button.jsx

@@ -1,10 +1,11 @@
-import React, {Component} from 'react';
+import React, {Component, Fragment} from 'react';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import * as actions from '../../modules/actions';
 import ControlButton from './control-button';
 import {getFailedOpenedImageIds} from '../../modules/selectors/tree';
+import {Magnifier} from '@gravity-ui/icons';
 
 class FindSameDiffsButton extends Component {
     static propTypes = {
@@ -26,10 +27,14 @@ class FindSameDiffsButton extends Component {
         const {isDisabled} = this.props;
 
         return <ControlButton
-            label="🔍 Find same diffs"
+            label={<Fragment>
+                <Magnifier/>
+                Find same diffs
+            </Fragment>}
             isSuiteControl={true}
             isDisabled={isDisabled}
             handler={this._findSameDiffs}
+            dataTestId={'find-same-diffs'}
         />;
     }
 }

lib/static/components/controls/menu-bar.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {Dropdown} from 'semantic-ui-react';
 import {isEmpty} from 'lodash';
 import ExtensionPoint from '../extension-point';
-import plugins from '../../modules/plugins';
+import * as plugins from '../../modules/plugins';
 import {MENU_BAR} from '../../../constants/extension-points';
 import { Button, DropdownMenu, Icon, Menu } from '@gravity-ui/uikit';
 import {Bars} from '@gravity-ui/icons';

lib/static/components/controls/selects/index.styl

@@ -1,4 +1,4 @@
-.custom-label
+.g-label.custom-label
     border-top-right-radius: 0
     border-bottom-right-radius: 0
 

lib/static/components/details.jsx

@@ -4,14 +4,16 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {isEmpty, isFunction} from 'lodash';
+import {Card, Disclosure} from '@gravity-ui/uikit';
 
 export default class Details extends Component {
     static propTypes = {
+        type: PropTypes.oneOf(['text', 'image']),
         title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
         content: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.element, PropTypes.array]).isRequired,
         extendClassNames: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
         onClick: PropTypes.func,
-        asHtml: PropTypes.bool,
+        asHtml: PropTypes.bool
     };
 
     state = {isOpened: false};
@@ -28,10 +30,14 @@ export default class Details extends Component {
         });
     };
 
+    stopPropagation = (e) => {
+        e.stopPropagation();
+    };
+
     _getContent() {
         const content = this.props.content;
 
-        return isFunction(content) ? content() : content
+        return isFunction(content) ? content() : content;
     }
 
     _renderContent() {
@@ -44,11 +50,11 @@ export default class Details extends Component {
 
         return <div className='details__content' {...extraProps}>
             {children}
-        </div>
+        </div>;
     }
 
     render() {
-        const {title, content, extendClassNames} = this.props;
+        const {type, title, content, extendClassNames} = this.props;
         const className = classNames(
             'details',
             extendClassNames
@@ -60,12 +66,23 @@ export default class Details extends Component {
                     {title}
                 </div>
             ) : (
-                <details className={className}>
-                    <summary className='details__summary' onClick={this.handleClick}>
-                        {title}
-                    </summary>
-                    {this._renderContent()}
-                </details>
+                <Disclosure className={className} onUpdate={this.handleClick}
+                    size='l'>
+                    <Disclosure.Summary>
+                        {(props, defaultButton) => (
+                            <div className={classNames(className, 'details__summary')} {...props}>
+                                <div className='details__expand-button' onClick={this.stopPropagation}>
+                                    {defaultButton}
+                                </div>
+                                {title}
+                            </div>
+                        )}
+                    </Disclosure.Summary>
+                    {type === 'image' ? this._renderContent() :
+                        <Card className='details__card' view='filled'>
+                            {this._renderContent()}
+                        </Card>}
+                </Disclosure>
             )
         );
     }

lib/static/components/extension-point.jsx

@@ -1,7 +1,7 @@
 import React, {Component, Fragment} from 'react';
 import PropTypes from 'prop-types';
 import ErrorBoundary from './error-boundary';
-import plugins from '../modules/plugins';
+import * as plugins from '../modules/plugins';
 
 export default class ExtensionPoint extends Component {
     static propTypes = {

lib/static/components/header/summary/dbSummary.jsx

@@ -3,8 +3,7 @@ import {Dropdown} from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
 import DbBtn from './dbBtn';
-import Popup from '../../popup';
-import { Popover } from '@gravity-ui/uikit';
+import {Popover} from '@gravity-ui/uikit';
 
 export default class DbSummaryKey extends Component {
     /*
@@ -39,15 +38,15 @@ export default class DbSummaryKey extends Component {
 
         return (
             <div className='db-info-container'>
-            <Popover
-            disablePortal
-            placement={'bottom'}
-                content={
-                    additionalInfo
+                <Popover
+                    disablePortal
+                    placement={'bottom'}
+                    content={
+                        additionalInfo
                     }
-            >
-                <DbBtn fetchDbDetails={fetchDbDetails} />
-            </Popover>
+                >
+                    <DbBtn fetchDbDetails={fetchDbDetails} />
+                </Popover>
             </div>
         );
     }

lib/static/components/icons/view-in-browser/index.jsx

@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import {Eye, EyeSlash} from '@gravity-ui/icons';
 
 import * as actions from '../../../modules/actions';
 import {getUrlWithBase} from '../../../../common-utils';
@@ -27,13 +28,13 @@ class ViewInBrowser extends Component {
     render() {
         const {suiteUrl, baseHost, extendClassNames} = this.props;
         const className = classNames(
-            'fa view-in-browser',
-            suiteUrl ? 'fa-eye view-in-browser_active' : 'fa-eye-slash view-in-browser_disabled',
+            'view-in-browser',
+            suiteUrl ? 'view-in-browser_active' : 'view-in-browser_disabled',
             extendClassNames
         );
 
         if (!suiteUrl) {
-            return <i className={className} aria-hidden="true" />;
+            return <i className={className} aria-hidden="true"><EyeSlash color='black'/></i> ;
         }
 
         return (
@@ -44,7 +45,7 @@ class ViewInBrowser extends Component {
                 title="view in browser"
                 target="_blank"
                 data-test-id='view-in-browser'
-            />
+            ><Eye color='black'/></a>
         );
     }
 }