refactor: refactor test body using GravityUI

gemini-testing · Jul 12, 2024 · e71515c · e71515c
1 parent 951b1cd
commit e71515c
Show file tree

Hide file tree

Showing 61 changed files with 252 additions and 926 deletions.
diff --git a/lib/static/components/bullet.jsx b/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 <ChevronUp className={classNames(className, 'bullet_type-simple')}/>;
     }
 
-    return <Checkbox
-        className={classNames('bullet_type-checkbox', className)}
-        checked={isCheckboxChecked(status)}
-        indeterminate={isCheckboxIndeterminate(status)}
-        onClick={onClick}
-    />;
+    return <div onClick={handleClick}>
+            <Checkbox
+            className={classNames('bullet_type-checkbox', className)}
+            checked={isCheckboxChecked(status)}
+            indeterminate={isCheckboxIndeterminate(status)}
+        />
+    </div>
 };
 
 Bullet.propTypes = {

diff --git a/lib/static/components/controls/menu-bar.jsx b/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';

diff --git a/lib/static/components/details.jsx b/lib/static/components/details.jsx
@@ -8,6 +8,7 @@ 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]),
@@ -29,6 +30,10 @@ export default class Details extends Component {
         });
     };
 
+    stopPropagation = (e) => {
+        e.stopPropagation();
+    }
+
     _getContent() {
         const content = this.props.content;
 
@@ -49,7 +54,7 @@ export default class Details extends Component {
     }
 
     render() {
-        const {title, content, extendClassNames} = this.props;
+        const {type, title, content, extendClassNames} = this.props;
         const className = classNames(
             'details',
             extendClassNames
@@ -65,12 +70,18 @@ export default class Details extends Component {
                      size='l'>
                         <Disclosure.Summary>
                             {(props, defaultButton) => (
-                                <div className={className}><div className='details__expand-button'>{defaultButton}</div>{title}</div>
+                                <div className={classNames(className, 'details__summary')} {...props}>
+                                    <div className='details__expand-button' onClick={this.stopPropagation}>
+                                        {defaultButton}
+                                    </div>
+                                    {title}
+                                </div>
                             )}
                         </Disclosure.Summary>
-                    <Card className='details__card'>
+                    {type == 'image' ? this._renderContent() : 
+                    <Card className='details__card' view='filled'>
                         {this._renderContent()}
-                    </Card>
+                    </Card>}
                 </Disclosure>
             )
         );

diff --git a/lib/static/components/extension-point.jsx b/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 = {

diff --git a/lib/static/components/icons/view-in-browser/index.jsx b/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>
         );
     }
 }

diff --git a/lib/static/components/icons/view-in-browser/index.styl b/lib/static/components/icons/view-in-browser/index.styl
@@ -1,11 +1,6 @@
 .view-in-browser {
-    display: inline-block;
-    width: 16px;
-    height: 19px;
+    height: 16px;
     margin-left: 4px;
-    margin-right: 0;
-    padding: 0 2px;
-    border: none;
     color: black;
     opacity: 0.3;
 

diff --git a/lib/static/components/modals/modal.jsx b/lib/static/components/modals/modal.jsx
@@ -1,27 +1,25 @@
 import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
+import { Portal } from '@gravity-ui/uikit';
 import './modal.css';
 
 export default class Modal extends Component {
     componentWillMount() {
-        this._root = document.createElement('div');
         document.body.classList.add('modal-open');
-        document.body.appendChild(this._root);
     }
 
     componentWillUnmount() {
         document.body.classList.remove('modal-open');
-        document.body.removeChild(this._root);
     }
 
     render() {
-        const {className} = this.props;
+        const {className, children} = this.props;
 
-        return ReactDOM.createPortal(
-            <div className={className}>
-                {this.props.children}
-            </div>,
-            this._root
-        );
+        return (
+            <Portal>
+                <div className={className}>
+                    {children}
+                </div>
+            </Portal>
+        )
     }
 }
diff --git a/lib/static/components/retry-switcher/item.jsx b/lib/static/components/retry-switcher/item.jsx
@@ -8,6 +8,7 @@ import {
     hasUnrelatedToScreenshotsErrors,
     isFailStatus
 } from '../../../common-utils';
+import { Button } from '@gravity-ui/uikit';
 
 class RetrySwitcherItem extends Component {
     static propTypes = {
@@ -24,16 +25,23 @@ class RetrySwitcherItem extends Component {
 
     render() {
         const {status, attempt, isActive, onClick, title, keyToGroupTestsBy, matchedSelectedGroup} = this.props;
+        const statusToView = {
+            success: 'flat-success',
+            updated: 'flat-success',
+            error: 'flat-danger',
+            fail: 'flat-utility',
+            fail_error: 'flat-utility',
+            skipped: 'normal',
+        }
 
         const className = classNames(
-            'state-button',
             'tab-switcher__button',
-            {[`tab-switcher__button_status_${status}`]: status},
             {'tab-switcher__button_active': isActive},
+            {[`tab-switcher__button_status_${status}`]: status},
             {'tab-switcher__button_non-matched': keyToGroupTestsBy && !matchedSelectedGroup}
         );
 
-        return <button title={title} className={className} onClick={onClick} data-test-id='retry-switcher'>{attempt + 1}</button>;
+        return <Button view={statusToView[status]} selected title={title} className={className} onClick={onClick} qa='retry-switcher'>{attempt + 1}</Button>
     }
 }
 

diff --git a/lib/static/components/section/body/description.jsx b/lib/static/components/section/body/description.jsx
@@ -16,9 +16,9 @@ export default class Description extends Component {
 
     render() {
         return <Details
+            type='text'
             title='Description'
             content={this._renderDescription}
-            extendClassNames='details_type_text'
         />;
     }
 }
diff --git a/lib/static/components/section/body/history/index.jsx b/lib/static/components/section/body/history/index.jsx
@@ -5,16 +5,33 @@ import {isEmpty} from 'lodash';
 import Details from '../../../details';
 
 import './index.styl';
+import { List } from '@gravity-ui/uikit';
 
-const History = ({history}) => (
+const History = ({history}) => {
+    const renderHistoryItem = (item) => {
+        const [name, time] = item.split(" <- ");
+        return (
+            <div className='history-item'>
+                <span className='history-item__name'>{name}</span>
+                <span className='history-item__time'>{time}</span>
+            </div>
+        )
+    }
+    return (
     isEmpty(history)
         ? null
         : <Details
+            type='text'
             title='History'
-            content={history}
-            extendClassNames='details_type_text history'
+            content={
+                <div style={{display: `flex`}}>
+                    <List items={history} renderItem={renderHistoryItem} filterable={false} virtualized={false}/>
+                </div>
+            }
+            extendClassNames='history'
         />
-);
+    )
+};
 
 History.propTypes = {
     resultId: PropTypes.string.isRequired,
@@ -24,6 +41,5 @@ History.propTypes = {
 
 export default connect(({tree}, {resultId}) => {
     const {history = []} = tree.results.byId[resultId];
-    console.log(history);
     return {history};
 })(History);
diff --git a/lib/static/components/section/body/history/index.styl b/lib/static/components/section/body/history/index.styl
@@ -1,4 +1,17 @@
 .history {
     white-space: pre-wrap;
     word-wrap: break-word;
+
+    .history-item {
+        display: inline-flex;
+        padding-right: 8px;
+        padding-top: 1px;
+        padding-bottom: 1px;
+
+        gap: 4px;
+
+        .history-item__time {
+            opacity: 0.5;
+        }
+    }
 }
diff --git a/lib/static/components/section/body/meta-info/content.jsx b/lib/static/components/section/body/meta-info/content.jsx
@@ -35,46 +35,31 @@ const resolveUrl = (baseUrl, value) => {
 };
 
 const metaToElements = (metaInfo, metaInfoBaseUrls) => {
-    return <DefinitionList className='meta-info__item' items={
+    return <DefinitionList className='meta-info' itemClassName='meta-info__item' items={
         map(metaInfo, (value, key) => {
+            let url = value.url;
+            value = value.content;
             if (isUrl(value)) {
-                value = mkTextWithClipboardButton(value, value);
+                url = value;
             } else if (metaInfoBaseUrls[key]) {
                 const baseUrl = metaInfoBaseUrls[key];
                 const link = isUrl(baseUrl) ? resolveUrl(baseUrl, value) : path.join(baseUrl, value);
-                value = mkTextWithClipboardButton(value, link);
+                url = link;
             } else if (typeof value === 'boolean') {
                 value = value.toString();
             }
-            else if (typeof value === 'string') {
-                value = mkTextWithClipboardButton(value);
+            if (url) {
+                value = <a data-suite-view-link={url} className="custom-icon_view-local" target="_blank" href={url}>
+                    {value}
+                </a>
             }
             return {
                 name: key,
                 content: <div className="meta-info__item-value">{value}</div>,
-                copyText: key
+                copyText: url || value
             }
         })
     }/>
-    return map(metaInfo, (value, key) => {
-        if (isUrl(value)) {
-            value = mkTextWithClipboardButton(value, value);
-        } else if (metaInfoBaseUrls[key]) {
-            const baseUrl = metaInfoBaseUrls[key];
-            const link = isUrl(baseUrl) ? resolveUrl(baseUrl, value) : path.join(baseUrl, value);
-            value = mkTextWithClipboardButton(value, link);
-        } else if (typeof value === 'boolean') {
-            value = value.toString();
-        }
-        else if (typeof value === 'string') {
-            value = mkTextWithClipboardButton(value);
-        }
-
-        return <div key={key} className="meta-info__item">
-            <span className="meta-info__item-key">{key}: </span>
-            <div className="meta-info__item-value">{value}</div>
-        </div>;
-    });
 };
 
 class MetaInfoContent extends Component {
@@ -113,8 +98,11 @@ class MetaInfoContent extends Component {
             ...serializedMetaValues,
             ...extraMetaInfo
         };
+        Object.keys(formattedMetaInfo).forEach((key) => {
+            formattedMetaInfo[key] = {content: formattedMetaInfo[key]}
+        })
         if (result.suiteUrl) {
-            formattedMetaInfo.url = mkTextWithClipboardButton(result.metaInfo.url, getUrlWithBase(result.suiteUrl, baseHost));
+            formattedMetaInfo.url = {content: result.metaInfo.url || result.suiteUrl, url: getUrlWithBase(result.suiteUrl, baseHost)}
         }
 
         return metaToElements(formattedMetaInfo, metaInfoBaseUrls);

diff --git a/lib/static/components/section/body/meta-info/index.jsx b/lib/static/components/section/body/meta-info/index.jsx
@@ -19,9 +19,9 @@ class MetaInfo extends Component {
         const {resultId} = this.props;
 
         return <Details
+            type='text'
             title='Meta'
             content={<MetaInfoContent resultId={resultId}/>}
-            extendClassNames='details_type_text'
             onClick={this.onToggleMetaInfo}
         />;
     }

diff --git a/lib/static/components/section/body/page-screenshot.tsx b/lib/static/components/section/body/page-screenshot.tsx
@@ -10,9 +10,9 @@ interface PageScreenshotProps {
 export class PageScreenshot extends Component<PageScreenshotProps> {
     render(): JSX.Element {
         return <Details
+            type='image'
             title="Page screenshot"
             content={(): JSX.Element => <ResizedScreenshot image={this.props.image}/>}
-            extendClassNames="details_type_image"
         />;
     }
 }