Add version info (#80)

Add version info overlay. Fixes #78

src/components/landing/layout/footer/powered-by-links.tsx

@@ -1,35 +1,36 @@
-import { Trans, useTranslation } from 'react-i18next'
-import { TranslatedLink } from './translated-link'
 import React, { Fragment } from 'react'
-import { ExternalLink } from './external-link'
+import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../../../redux'
+import { ExternalLink } from '../../../links/external-link'
+import { TranslatedExternalLink } from '../../../links/translated-external-link'
+import { VersionInfo } from '../version-info/version-info'
 
 export const PoweredByLinks: React.FC = () => {
   useTranslation()
 
   const defaultLinks =
     {
-      releases: '/s/release-notes',
-      sourceCode: 'https://github.com/codimd/server/tree/41b13e71b6b1d499238c04b15d65e3bd76442f1d'
+      releases: '/n/release-notes'
     }
 
   const config = useSelector((state: ApplicationState) => state.backendConfig)
 
   return (
     <p>
-      <Trans i18nKey="poweredBy" components={[<ExternalLink href="https://codimd.org" text="CodiMD"/>]}/>
+      <Trans i18nKey="poweredBy">
+        <ExternalLink href="https://codimd.org" text="CodiMD"/>
+      </Trans>
       {
         Object.entries({ ...defaultLinks, ...(config.specialLinks) }).map(([i18nKey, href]) =>
           <Fragment key={i18nKey}>
             &nbsp;|&nbsp;
-            <TranslatedLink
-              href={href}
-              i18nKey={i18nKey}
-            />
+            <TranslatedExternalLink href={href} i18nKey={i18nKey}/>
           </Fragment>
         )
       }
+      &nbsp;|&nbsp;
+      <VersionInfo/>
     </p>
   )
 }

src/components/landing/layout/footer/social-links.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { ExternalLink } from './external-link'
+import { ExternalLink } from '../../../links/external-link'
 
 const SocialLink: React.FC = () => {
   useTranslation()

src/components/landing/layout/footer/translated-link.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { Trans, useTranslation } from 'react-i18next'
-
-export interface TranslatedLinkProps {
-  href: string;
-  i18nKey: string;
-}
-
-const TranslatedLink: React.FC<TranslatedLinkProps> = ({ href, i18nKey }) => {
-  useTranslation()
-  return (
-    <a href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="text-light">
-      <Trans i18nKey={i18nKey}/>
-    </a>
-  )
-}
-
-export { TranslatedLink }

src/components/landing/layout/version-info/version-info.tsx

@@ -0,0 +1,51 @@
+import React, { Fragment, useState } from 'react'
+import { Button, Col, Modal, Row } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { ApplicationState } from '../../../../redux'
+import frontendVersion from '../../../../version.json'
+import { TranslatedExternalLink } from '../../../links/translated-external-link'
+import { VersionInputField } from './version-input-field'
+
+export const VersionInfo: React.FC = () => {
+  const [show, setShow] = useState(false)
+
+  const handleClose = () => setShow(false)
+  const handleShow = () => setShow(true)
+
+  const { t } = useTranslation()
+
+  const serverVersion = useSelector((state: ApplicationState) => state.backendConfig.version)
+
+  const column = (title: string, version: string, sourceCodeLink: string, issueTrackerLink: string) => (
+    <Col md={6} className={'flex-column'}>
+      <h5>{title}</h5>
+      <VersionInputField version={version}/>
+      {sourceCodeLink
+        ? <TranslatedExternalLink i18nKey={'sourceCode'} className={'btn btn-sm btn-primary d-block mb-2'} href={sourceCodeLink}/> : null}
+      {issueTrackerLink
+        ? <TranslatedExternalLink i18nKey={'issueTracker'} className={'btn btn-sm btn-primary d-block mb-2'} href={issueTrackerLink}/> : null}
+    </Col>
+  )
+
+  return (
+    <Fragment>
+      <Link to={'#'} className={'text-light'} onClick={handleShow}><Trans i18nKey={'versionInfo'}/></Link>
+      <Modal show={show} onHide={handleClose} animation={true}>
+        <Modal.Body className="text-dark">
+          <h3><Trans i18nKey={'youAreUsing'}/></h3>
+          <Row>
+            {column(t('serverVersion'), serverVersion.version, serverVersion.sourceCodeUrl, serverVersion.issueTrackerUrl)}
+            {column(t('clientVersion'), frontendVersion.version, frontendVersion.sourceCodeUrl, frontendVersion.issueTrackerUrl)}
+          </Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            <Trans i18nKey={'close'}/>
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </Fragment>
+  )
+}

src/components/landing/layout/version-info/version-input-field.tsx

@@ -0,0 +1,43 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { Fragment, useRef, useState } from 'react'
+import { Button, FormControl, InputGroup, Overlay, Tooltip } from 'react-bootstrap'
+import { Trans } from 'react-i18next'
+
+export interface VersionInputFieldProps {
+  version: string
+}
+
+export const VersionInputField: React.FC<VersionInputFieldProps> = ({ version }) => {
+  const inputField = useRef<HTMLInputElement>(null)
+  const [showCopiedTooltip, setShowCopiedTooltip] = useState(false)
+
+  const copyToClipboard = (content: string) => {
+    navigator.clipboard.writeText(content).then(() => {
+      setShowCopiedTooltip(true)
+      setTimeout(() => { setShowCopiedTooltip(false) }, 2000)
+    }).catch(() => {
+      console.error("couldn't copy")
+    })
+  }
+
+  return (
+    <Fragment>
+      <Overlay target={inputField} show={showCopiedTooltip} placement="top">
+        {(props) => (
+          <Tooltip id={'copied_' + version} {...props}>
+            <Trans i18nKey={'successfullyCopied'}/>
+          </Tooltip>
+        )}
+      </Overlay>
+
+      <InputGroup className="mb-3">
+        <FormControl readOnly={true} ref={inputField} className={'text-center'} value={version} />
+        <InputGroup.Append>
+          <Button variant="outline-secondary" onClick={() => copyToClipboard(version)} title={'Copy'}>
+            <FontAwesomeIcon icon={'copy'}/>
+          </Button>
+        </InputGroup.Append>
+      </InputGroup>
+    </Fragment>
+  )
+}

src/components/links/external-link.tsx

@@ -1,19 +1,20 @@
 import React, { Fragment } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { IconProp } from '../../../../utils/iconProp'
+import { IconProp } from '../../utils/iconProp'
 
 export interface ExternalLinkProp {
   href: string;
   text: string;
   icon?: IconProp;
+  className?: string
 }
 
-export const ExternalLink: React.FC<ExternalLinkProp> = ({ href, text, icon }) => {
+export const ExternalLink: React.FC<ExternalLinkProp> = ({ href, text, icon, className = 'text-light' }) => {
   return (
     <a href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className="text-light">
+      className={className}>
       {
         icon
           ? <Fragment>

src/components/links/translated-external-link.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { IconProp } from '../../utils/iconProp'
+import { ExternalLink } from './external-link'
+
+export interface TranslatedLinkProps {
+  i18nKey: string;
+  href: string;
+  icon?: IconProp;
+  className?: string
+}
+
+const TranslatedExternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, ...props }) => {
+  const { t } = useTranslation()
+  return (
+    <ExternalLink text={t(i18nKey)} {...props}/>
+  )
+}
+
+export { TranslatedExternalLink }