Merge pull request #458 from gemini-testing/HERMIONE-850.db_popup

fix: db popup inconsistent position

Author: KuznetsovRoman

lib/static/components/header/summary/dbBtn.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Ref, Button} from 'semantic-ui-react';
+import classNames from 'classnames';
+
+const DbBtn = ({fetchDbDetails}, ref) => {
+    const successFetchDbDetails = fetchDbDetails.filter(d => d.success);
+    const isFailed = successFetchDbDetails.length !== fetchDbDetails.length;
+    const value = `${successFetchDbDetails.length}/${fetchDbDetails.length}`;
+    const content = `Databases loaded: ${value}`;
+    const className = classNames(
+        'db-info',
+        {'db-info_failed': isFailed}
+    );
+
+    return (
+        <Ref innerRef={ref}>
+            <Button
+                content={content}
+                icon="angle down"
+                className={className}
+                basic
+            />
+        </Ref>
+    );
+};
+
+const ForwardedDbBtn = React.forwardRef(DbBtn);
+
+ForwardedDbBtn.propTypes = {
+    fetchDbDetails: PropTypes.arrayOf(PropTypes.shape({
+        success: PropTypes.bool
+    })).isRequired
+};
+
+export default ForwardedDbBtn;

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

@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
-import {Dropdown, Button, Ref} from 'semantic-ui-react';
+import {Dropdown} from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
+import DbBtn from './dbBtn';
 import Popup from '../../popup';
 
 export default class DbSummaryKey extends Component {
@@ -28,38 +28,19 @@ export default class DbSummaryKey extends Component {
             return null;
         }
 
-        const successFetchDbDetails = fetchDbDetails.filter(d => d.success);
-        const isFailed = successFetchDbDetails.length !== fetchDbDetails.length;
-        const value = `${successFetchDbDetails.length}/${fetchDbDetails.length}`;
         const additionalInfo = fetchDbDetails.map(({url, status, success}) => (
             <Dropdown.Item key={url} className="db-info__row">
                 {' '}
                 {url} responded with
                 <span className={success ? 'db-info__row_success' : 'db-info__row_fail'}>{' ' + status}</span>
             </Dropdown.Item>
         ));
-        const title = `Databases loaded: ${value}`;
-        const btnClassNames = classNames(
-            'db-info',
-            {'db-info_failed': isFailed}
-        );
-
-        const DbBtn = React.forwardRef((props, ref) => (
-            <Ref innerRef={ref}>
-                <Button
-                    content={title}
-                    icon="angle down"
-                    className={btnClassNames}
-                    basic
-                />
-            </Ref>
-        ));
 
         return (
             <Popup
                 className="db-info__popup"
                 action="hover"
-                target={<DbBtn />}
+                target={<DbBtn fetchDbDetails={fetchDbDetails} />}
             >
                 {additionalInfo}
             </Popup>