Use copy to clipboard button from gravityUI (#561)

* feat: add GravityUI copy button
gemini-testing · Jul 1, 2024 · a47065f · a47065f
1 parent 0e0792d
commit a47065f
Show file tree

Hide file tree

Showing 9 changed files with 655 additions and 136 deletions.
diff --git a/lib/static/components/section/body/meta-info/content.jsx b/lib/static/components/section/body/meta-info/content.jsx
@@ -1,21 +1,17 @@
 import path from 'path';
-import React, {Component, Fragment} from 'react';
-import {connect} from 'react-redux';
-import ClipboardButton from 'react-clipboard.js';
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { ClipboardButton } from '@gravity-ui/uikit';
 import PropTypes from 'prop-types';
-import {map, mapValues, isObject, omitBy, isEmpty} from 'lodash';
-import {isUrl, getUrlWithBase} from '../../../../../common-utils';
+import { map, mapValues, isObject, omitBy, isEmpty } from 'lodash';
+import { isUrl, getUrlWithBase } from '../../../../../common-utils';
 
-const mkTextWithClipboardButton = (text, url)  => {
+const mkTextWithClipboardButton = (text, url) => {
     return <Fragment>
         {url ? <a data-suite-view-link={url} className="custom-icon_view-local" target="_blank" href={url}>
             {text || url}
         </a> : text}
-        <ClipboardButton
-            className="button custom-icon custom-icon_copy-to-clipboard"
-            button-title="copy to clipboard"
-            data-clipboard-text={url || text}>
-        </ClipboardButton>
+        <ClipboardButton text={text || url} size='s' className='copy-button' />
     </Fragment>;
 }
 
@@ -77,17 +73,17 @@ class MetaInfoContent extends Component {
     };
 
     getExtraMetaInfo = () => {
-        const {testName, apiValues: {extraItems, metaInfoExtenders}} = this.props;
+        const { testName, apiValues: { extraItems, metaInfoExtenders } } = this.props;
 
         return omitBy(mapValues(metaInfoExtenders, (extender) => {
             const stringifiedFn = extender.startsWith('return') ? extender : `return ${extender}`;
 
-            return new Function(stringifiedFn)()({testName}, extraItems);
+            return new Function(stringifiedFn)()({ testName }, extraItems);
         }), isEmpty);
     };
 
     render() {
-        const {result, metaInfoBaseUrls, baseHost} = this.props;
+        const { result, metaInfoBaseUrls, baseHost } = this.props;
 
         const serializedMetaValues = serializeMetaValues(result.metaInfo);
         const extraMetaInfo = this.getExtraMetaInfo();
@@ -104,7 +100,7 @@ class MetaInfoContent extends Component {
 }
 
 export default connect(
-    ({tree, config: {metaInfoBaseUrls}, apiValues, view}, {resultId}) => {
+    ({ tree, config: { metaInfoBaseUrls }, apiValues, view }, { resultId }) => {
         const result = tree.results.byId[resultId];
         const browser = tree.browsers.byId[result.parentId];
 

diff --git a/lib/static/gui.jsx b/lib/static/gui.jsx
@@ -3,12 +3,18 @@ import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
 import store from './modules/store';
 import Gui from './components/gui';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import '@gravity-ui/uikit/styles/fonts.css';
+import '@gravity-ui/uikit/styles/styles.css';
 
 const rootEl = document.getElementById('app');
 
 ReactDOM.render(
-    <Provider store={store}>
-        <Gui/>
-    </Provider>,
+    <ThemeProvider theme='light'>
+        <Provider store={store}>
+            <Gui/>
+        </Provider>
+    </ThemeProvider>,
     rootEl
 );
diff --git a/lib/static/index.jsx b/lib/static/index.jsx
@@ -3,12 +3,18 @@ import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
 import store from './modules/store';
 import Report from './components/report';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import '@gravity-ui/uikit/styles/fonts.css';
+import '@gravity-ui/uikit/styles/styles.css';
 
 const rootEl = document.getElementById('app');
 
 ReactDOM.render(
-    <Provider store={store}>
-        <Report/>
-    </Provider>,
+    <ThemeProvider theme='light'>
+        <Provider store={store}>
+            <Report/>
+        </Provider>
+    </ThemeProvider>,
     rootEl
 );
diff --git a/lib/static/styles.css b/lib/static/styles.css
@@ -530,7 +530,7 @@ details[open] > .details__summary:before {
 .meta-info__item {
     display: flex;
     word-wrap: break-word;
-    margin-bottom: 5px;
+    align-items: center;
 }
 
 .meta-info__item:last-child {
@@ -546,6 +546,7 @@ details[open] > .details__summary:before {
 .meta-info__item-value {
     display: grid;
     grid-template-columns: repeat(2, auto);
+    align-items: center;
 }
 
 .custom-icon_view-local{
@@ -555,11 +556,15 @@ details[open] > .details__summary:before {
     text-overflow: ellipsis;
 }
 
-.meta-info__item .custom-icon_copy-to-clipboard {
+.copy-button { 
+    margin-left: 2px;
+}
+
+.meta-info__item .copy-button {
     opacity: 0;
 }
 
-.meta-info__item:hover .custom-icon_copy-to-clipboard {
+.meta-info__item:hover .copy-button {
     opacity: 1;
 }