- client: Don't hide version string when built-in auto-update is disabled: Merge pull request #628 in DNS/adguard-home from fix/1726 to master

Close #1726

Squashed commit of the following:

commit 3eac793c7c05fbb599f510fd8cae560011b7f5ca
Merge: aebfaf61 16a6aada
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 27 14:14:58 2020 +0300

    Merge branch 'master' into fix/1726

commit aebfaf610113f83027feb959ed87adef1b2db255
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 27 12:54:30 2020 +0300

    Always show version but hide update button when program is launched with "--no-check-update" flag

commit 1d4ee05959379420fee9730b3bf8ba737852e96e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 27 11:59:10 2020 +0300

    Use classnames lib

commit 7003a7064c9625fab513dc02222faff4a340393f
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 26 19:40:22 2020 +0300

    - client: Don't hide version string when built-in auto-update is disabled

client/src/components/App/index.js

@@ -126,6 +126,7 @@ class App extends Component {
                         dnsPort={dashboard.dnsPort}
                         processingVersion={dashboard.processingVersion}
                         getVersion={getVersion}
+                        checkUpdateFlag={dashboard.checkUpdateFlag}
                     />
                     <Toasts />
                     <Icons />

client/src/components/ui/Footer.js

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
+import classNames from 'classnames';
 
 import { REPOSITORY, PRIVACY_POLICY_LINK } from '../../helpers/constants';
 import { LANGUAGES } from '../../helpers/twosky';
@@ -10,6 +11,22 @@ import Version from './Version';
 import './Footer.css';
 import './Select.css';
 
+const linksData = [
+    {
+        href: REPOSITORY.URL,
+        name: 'homepage',
+    },
+    {
+        href: PRIVACY_POLICY_LINK,
+        name: 'privacy_policy',
+    },
+    {
+        href: REPOSITORY.ISSUES,
+        className: 'btn btn-outline-primary btn-sm footer__link--report',
+        name: 'report_an_issue',
+    },
+];
+
 class Footer extends Component {
     getYear = () => {
         const today = new Date();
@@ -20,9 +37,27 @@ class Footer extends Component {
         i18n.changeLanguage(event.target.value);
     };
 
+    renderCopyright = () => <div className="footer__column">
+        <div className="footer__copyright">
+            <Trans>copyright</Trans> &copy; {this.getYear()}{' '}
+            <a target="_blank" rel="noopener noreferrer" href="https://adguard.com/">AdGuard</a>
+        </div>
+    </div>;
+
+    renderLinks = (linksData) => linksData.map(({ name, href, className = '' }) => <a
+        key={name}
+        href={href}
+        className={classNames('footer__link', className)}
+        target="_blank"
+        rel="noopener noreferrer"
+    >
+        <Trans>{name}</Trans>
+    </a>);
+
+
     render() {
         const {
-            dnsVersion, processingVersion, getVersion,
+            dnsVersion, processingVersion, getVersion, checkUpdateFlag,
         } = this.props;
 
         return (
@@ -30,39 +65,8 @@ class Footer extends Component {
                 <footer className="footer">
                     <div className="container">
                         <div className="footer__row">
-                            {!dnsVersion && (
-                                <div className="footer__column">
-                                    <div className="footer__copyright">
-                                        <Trans>copyright</Trans> &copy; {this.getYear()}{' '}
-                                        <a target="_blank" rel="noopener noreferrer" href="https://adguard.com/">AdGuard</a>
-                                    </div>
-                                </div>
-                            )}
                             <div className="footer__column footer__column--links">
-                                <a
-                                    href={REPOSITORY.URL}
-                                    className="footer__link"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    <Trans>homepage</Trans>
-                                </a>
-                                <a
-                                    href={PRIVACY_POLICY_LINK}
-                                    className="footer__link"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    <Trans>privacy_policy</Trans>
-                                </a>
-                                <a
-                                    href={REPOSITORY.ISSUES}
-                                    className="btn btn-outline-primary btn-sm footer__link footer__link--report"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    <Trans>report_an_issue</Trans>
-                                </a>
+                                {this.renderLinks(linksData)}
                             </div>
                             <div className="footer__column footer__column--language">
                                 <select
@@ -70,37 +74,32 @@ class Footer extends Component {
                                     value={i18n.language}
                                     onChange={this.changeLanguage}
                                 >
-                                    {Object.keys(LANGUAGES).map((lang) => (
-                                        <option key={lang} value={lang}>
-                                            {LANGUAGES[lang]}
-                                        </option>
-                                    ))}
+                                    {Object.keys(LANGUAGES)
+                                        .map((lang) => (
+                                            <option key={lang} value={lang}>
+                                                {LANGUAGES[lang]}
+                                            </option>
+                                        ))}
                                 </select>
                             </div>
                         </div>
                     </div>
                 </footer>
-                {dnsVersion && (
-                    <div className="footer">
-                        <div className="container">
-                            <div className="footer__row">
-                                <div className="footer__column">
-                                    <div className="footer__copyright">
-                                        <Trans>copyright</Trans> &copy; {this.getYear()}{' '}
-                                        <a target="_blank" rel="noopener noreferrer" href="https://adguard.com/">AdGuard</a>
-                                    </div>
-                                </div>
-                                <div className="footer__column footer__column--language">
-                                    <Version
-                                        dnsVersion={dnsVersion}
-                                        processingVersion={processingVersion}
-                                        getVersion={getVersion}
-                                    />
-                                </div>
+                <div className="footer">
+                    <div className="container">
+                        <div className="footer__row">
+                            {this.renderCopyright()}
+                            <div className="footer__column footer__column--language">
+                                <Version
+                                    dnsVersion={dnsVersion}
+                                    processingVersion={processingVersion}
+                                    getVersion={getVersion}
+                                    checkUpdateFlag={checkUpdateFlag}
+                                />
                             </div>
                         </div>
                     </div>
-                )}
+                </div>
             </Fragment>
         );
     }
@@ -110,6 +109,7 @@ Footer.propTypes = {
     dnsVersion: PropTypes.string,
     processingVersion: PropTypes.bool,
     getVersion: PropTypes.func,
+    checkUpdateFlag: PropTypes.bool,
 };
 
 export default withTranslation()(Footer);

client/src/components/ui/Version.js

@@ -6,14 +6,15 @@ import './Version.css';
 
 const Version = (props) => {
     const {
-        dnsVersion, processingVersion, t,
+        dnsVersion = 'undefined', processingVersion, t, checkUpdateFlag,
     } = props;
 
     return (
         <div className="version">
             <div className="version__text">
-                <Trans>version</Trans>:&nbsp;<span className="version__value" title={dnsVersion}>{dnsVersion}</span>
-                <button
+                <Trans>version</Trans>:&nbsp;
+                <span className="version__value" title={dnsVersion}>{dnsVersion}</span>
+                {checkUpdateFlag && <button
                     type="button"
                     className="btn btn-icon btn-icon-sm btn-outline-primary btn-sm ml-2"
                     onClick={() => props.getVersion(true)}
@@ -23,7 +24,7 @@ const Version = (props) => {
                     <svg className="icons">
                         <use xlinkHref="#refresh" />
                     </svg>
-                </button>
+                </button>}
             </div>
         </div>
     );
@@ -33,6 +34,7 @@ Version.propTypes = {
     dnsVersion: PropTypes.string.isRequired,
     getVersion: PropTypes.func.isRequired,
     processingVersion: PropTypes.bool.isRequired,
+    checkUpdateFlag: PropTypes.bool.isRequired,
     t: PropTypes.func.isRequired,
 };
 

client/src/reducers/index.js

@@ -96,6 +96,7 @@ const dashboard = handleActions(
                     canAutoUpdate,
                     isUpdateAvailable: true,
                     processingVersion: false,
+                    checkUpdateFlag: !!payload,
                 };
                 return newState;
             }
@@ -165,6 +166,7 @@ const dashboard = handleActions(
         autoClients: [],
         supportedTags: [],
         name: '',
+        checkUpdateFlag: false,
     },
 );