feat: add gravityUI copy button

gemini-testing · Jun 27, 2024 · cf4ef09 · cf4ef09
1 parent 842f059
commit cf4ef09
Show file tree

Hide file tree

Showing 5 changed files with 508 additions and 53 deletions.
diff --git a/lib/static/components/gui.jsx b/lib/static/components/gui.jsx
@@ -2,6 +2,7 @@ import React, {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import NotificationsSystem, {wyboTheme} from 'reapop';
+import {ThemeProvider} from '@gravity-ui/uikit';
 import {bindActionCreators} from 'redux';
 
 import {ROOT} from '../../constants/extension-points';
@@ -15,6 +16,8 @@ import {ClientEvents} from '../../gui/constants/client-events';
 import FaviconChanger from './favicon-changer';
 import ExtensionPoint from './extension-point';
 import BottomProgressBar from './bottom-progress-bar';
+import '@gravity-ui/uikit/styles/fonts.css';
+import '@gravity-ui/uikit/styles/styles.css';
 
 class Gui extends Component {
     static propTypes = {
@@ -77,6 +80,7 @@ class Gui extends Component {
 
         return (
             <Fragment>
+                <ThemeProvider theme='light'>
                 <ExtensionPoint name={ROOT}>
                     <CustomScripts scripts={customScripts}/>
                     {notificationElem}
@@ -89,6 +93,7 @@ class Gui extends Component {
                     <ModalContainer />
                     <BottomProgressBar />
                 </ExtensionPoint>
+                </ThemeProvider>
             </Fragment>
         );
     }

diff --git a/lib/static/components/section/body/meta-info/content.jsx b/lib/static/components/section/body/meta-info/content.jsx
@@ -1,33 +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';
-
-const mkTextWithClipboardButton = (text, url)  => {
-    const [hasRecentlyCopied, setHasRecentlyCopied] = React.useState(false);
-
-    const onCopy = React.useCallback(() => {
-        setHasRecentlyCopied(true);
-        setTimeout(() => {
-            setHasRecentlyCopied(false);
-        }, 1000);
-    }, [hasRecentlyCopied]);
+import { map, mapValues, isObject, omitBy, isEmpty } from 'lodash';
+import { isUrl, getUrlWithBase } from '../../../../../common-utils';
 
+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}
-        <div className='copy-button-container'>
-            <ClipboardButton
-                className="button custom-icon custom-icon_copy-to-clipboard"
-                button-title="copy to clipboard"
-                data-clipboard-text={url || text}>
-            </ClipboardButton>
-            <span className="copy-button-message">{hasRecentlyCopied ? "Copied!" : "Copy"}</span>
-        </div>
+        <ClipboardButton text={text || url} size='s' className='copy-button' />
     </Fragment>;
 }
 
@@ -89,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();
@@ -116,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/styles.css b/lib/static/styles.css
@@ -531,6 +531,7 @@ details[open] > .details__summary:before {
     display: flex;
     word-wrap: break-word;
     margin-bottom: 5px;
+    align-items: center;
 }
 
 .meta-info__item:last-child {
@@ -546,6 +547,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 +557,11 @@ details[open] > .details__summary:before {
     text-overflow: ellipsis;
 }
 
-.meta-info__item .custom-icon_copy-to-clipboard {
+.meta-info__item .copy-button {
     opacity: 0;
 }
 
-.meta-info__item:hover .custom-icon_copy-to-clipboard {
+.meta-info__item:hover .copy-button {
     opacity: 1;
 }