feat: ux improvements to publish modal (#1998)

ipfs · Aug 9, 2022 · ea4f632 · ea4f632
1 parent 42ed78d
commit ea4f632
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 15 deletions.
diff --git a/public/locales/en/app.json b/public/locales/en/app.json
@@ -30,7 +30,8 @@
     "unselectAll": "Unselect all",
     "generate": "Generate",
     "publish": "Publish",
-    "downloadCar": "Download as CAR"
+    "downloadCar": "Download as CAR",
+    "done": "Done"
   },
   "cliModal": {
     "description": "Paste the following into your terminal to do this task in IPFS via the command line. Remember that you'll need to replace placeholders with your specific parameters."

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
@@ -122,6 +122,7 @@
     "publishUnderKey": "Select key for publishing:",
     "help": "Go to Settings to learn about IPNS and create more keys.",
     "publishedUnderKey": "Successfully published under the key:",
+    "linkCopied": "Link copied!",
     "sharingPrompt": "Copy the link below and share it with others. The IPNS address will resolve as long as your node remains available on the network once a day to refresh the IPNS record.",
     "pleaseWait": "Please wait while the initial 20 copies of the updated IPNS record are stored with the help of DHT peers…"
   }

diff --git a/src/components/progress-bar/ProgressBar.js b/src/components/progress-bar/ProgressBar.js
@@ -18,7 +18,8 @@ ProgressBar.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
   br: PropTypes.string,
-  progress: PropTypes.number.isRequired
+  time: PropTypes.number,
+  progress: PropTypes.number
 }
 
 ProgressBar.defaultProps = {

diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js
@@ -8,6 +8,8 @@ import Icon from '../../../icons/StrokeSpeaker'
 import { connect } from 'redux-bundler-react'
 import Radio from '../../../components/radio/Radio'
 import ProgressBar from '../../../components/progress-bar/ProgressBar'
+import GlyphCopy from '../../../icons/GlyphCopy'
+import GlyphTick from '../../../icons/GlyphTick'
 import './PublishModal.css'
 
 const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGateway, className, doFetchIpnsKeys, doUpdateExpectedPublishTime, expectedPublishTime, ...props }) => {
@@ -16,6 +18,7 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate
   const [selectedKey, setSelectedKey] = useState({ name: '', id: '' })
   const [link, setLink] = useState('')
   const [start, setStart] = useState(null)
+  const [copied, setCopied] = useState(false)
 
   useEffect(() => {
     setDisabled(selectedKey.name === '' || start !== null)
@@ -25,6 +28,13 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate
     doFetchIpnsKeys()
   }, [doFetchIpnsKeys])
 
+  useEffect(() => {
+    if (copied) {
+      const timeoutId = setTimeout(() => setCopied(false), 2000)
+      return () => clearTimeout(timeoutId)
+    }
+  }, [copied])
+
   const changeKey = (key) => {
     setLink('')
     setError(null)
@@ -51,17 +61,34 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate
     if (link) {
       return (
         <div>
-          <div className='tl pv3'>{t('publishModal.publishedUnderKey')}<br/>
-            <span className='f6 charcoal-muted monospace'>{selectedKey.name}</span><br/>
-            <span className='f6 charcoal-muted monospace'>{selectedKey.id}</span>
+          <div className='tl pv3'>{t('publishModal.publishedUnderKey')}
+            <div className='f6 mv2 charcoal-muted monospace'>
+              <a target='_blank' rel='noopener noreferrer' className='link' href={link}>{selectedKey.name}</a>
+            </div>
+            <div className='f6 charcoal-muted monospace truncate'>
+              <a target='_blank' rel='noopener noreferrer' className='link' href={link}>{selectedKey.id}</a>
+            </div>
           </div>
           <p className='charcoal tl center'>{t('publishModal.sharingPrompt')}</p>
-          <div className='flex center pb2'>
+          <div className='flex center mb2 relative'>
             <input
               value={link}
               readOnly
-              className={'input-reset flex-grow-1 charcoal-muted ba b--black-20 br1 pa2 mr2 focus-outline'}
+              className={'input-reset flex-grow-1 charcoal-muted ba b--black-20 br1 pa2 focus-outline'}
+              style={{ color: `rgba(128, 133, 145, ${copied ? 0.6 : 1})` }}
               type='text' />
+
+            <div className='absolute h2 pl2 flex items-center' style={{ right: '4px', top: '50%', transform: 'translateY(-50%)', background: 'linear-gradient(90deg, rgba(255, 255, 255, 0.35), #ffffff 10%, #ffffff 100%)' }} >
+              { copied
+                ? <>
+                  <span className="charcoal-muted strong f5">{t('publishModal.linkCopied')}</span>
+                  <GlyphTick className='fill-aqua w2' />
+                </>
+                : <CopyToClipboard text={link} onCopy={() => setCopied(true)}>
+                  <GlyphCopy className='fill-charcoal-muted w2 h2 pointer' />
+                </CopyToClipboard>
+              }
+            </div>
           </div>
         </div>
       )
@@ -96,18 +123,20 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate
   return (
     <Modal {...props} className={className} onCancel={onLeave} >
       <ModalBody Icon={Icon} title={t('publishModal.title')}>
-        <div className='tl pv3'>{t('publishModal.cidToPublish')}<br/><span className='f6 charcoal-muted monospace'>{file.cid.toString()}</span></div>
+        <div className='tl pv3'>
+          {t('publishModal.cidToPublish')}
+          <div className='f6 mt1 charcoal-muted monospace'>{file.cid.toString()}</div>
+        </div>
         {modalBody()}
       </ModalBody>
 
       <ModalActions>
-        <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('app:actions.cancel')}</Button>
-
         { link
-          ? <CopyToClipboard text={link} onCopy={onLeave}>
-            <Button className='ma2 tc'>{t('app:actions.copy')}</Button>
-          </CopyToClipboard>
-          : <Button className='ma2 tc' bg='bg-teal' disabled={disabled} onClick={publish}>{t('app:actions.publish')}</Button>
+          ? <Button className='ma2 tc ml-auto' onClick={onLeave}>{t('app:actions.done')}</Button>
+          : <>
+            <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('app:actions.cancel')}</Button>
+            <Button className='ma2 tc' bg='bg-teal' disabled={disabled} onClick={publish}>{t('app:actions.publish')}</Button>
+          </>
         }
 
       </ModalActions>

diff --git a/test/e2e/ipns.test.js b/test/e2e/ipns.test.js
@@ -113,7 +113,7 @@ test.describe('IPNS publishing', () => {
       await ipfs.swarm.connect(peeraddr)
       await page.click(publishButton)
       await page.waitForSelector('text=Successfully published')
-      await page.click('button:has-text("Copy")')
+      await page.click('button:has-text("Done")')
       // confirm IPNS record in local store points at the CID
       const { id } = (await ipfs.key.list()).filter(k => k.name === keyName)[0]
       for await (const name of ipfs.name.resolve(`/ipns/${id}`, { recursive: true })) {