feat: joyride for pinning services & tutor mode (#1701)

* Add missing classNames * Put existing steps in correct order * Add text for new steps * off topic: make language selection button teal * Reduce config highlight target area * update react-joyride; auto placement on settings screen * chore: fix scroll issue in joyride Co-authored-by: Rafael Ramalho <[email protected]>
ipfs · Jan 5, 2021 · 1b0bbdb · 1b0bbdb
1 parent 9ccb2e5
commit 1b0bbdb
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "react-hook-form": "^6.0.6",
     "react-i18next": "^11.7.0",
     "react-identicons": "^1.2.4",
-    "react-joyride": "^2.1.1",
+    "react-joyride": "^2.3.0",
     "react-loadable": "^5.5.0",
     "react-overlays": "^2.1.1",
     "react-router-dom": "^5.2.0",

diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json
@@ -113,19 +113,27 @@
       "paragraph2": "If you're running IPFS Desktop you'll have some specific settings for it too."
     },
     "step2": {
+      "title": "Custom API address",
+      "paragraph1": "If you've configured your IPFS node with a custom API address, you can update your config file right here instead of editing the JSON by hand."
+    },
+    "step3": {
+      "title": "Pinning services",
+      "paragraph1": "<0>If you have accounts with third-party remote pinning services, add them here so you can pin/unpin items to those services directly from the Files screen. You can learn more about third-party pinning services in the <1>IPFS Docs</1>.</0>"
+    },
+    "step4": {
       "title": "Language selector",
       "paragraph1": "<0>You can change the language of the Web UI. If your preferred language isn't available, head over our project page in <1>Transifex</1> to help us translate!</0>"
     },
-    "step3": {
+    "step5": {
       "title": "Anonymous usage analytics",
       "paragraph1": "If you opt-in, you can help us make the Web UI better by sending anonymous usage analytics.",
       "paragraph2": "You're able to choose what data you send us and we won't be able to identify you, we value privacy above all else."
     },
-    "step4": {
-      "title": "Custom API address",
-      "paragraph1": "If you've configured your IPFS node with a custom API address, you can update your config file right here instead of editing the JSON by hand."
+    "step6": {
+      "title": "CLI tutor mode",
+      "paragraph1": "Enable CLI tutor mode to see shortcuts to the command-line version of common IPFS commands — helpful if you're learning to use IPFS from the terminal, or if you just need a refresher."
     },
-    "step5": {
+    "step7": {
       "title": "IPFS Config",
       "paragraph1": "You can change the config of your IPFS node right from Web UI!",
       "paragraph2": "Don't forget to restart the daemon to apply the changes."

diff --git a/src/components/language-selector/LanguageSelector.js b/src/components/language-selector/LanguageSelector.js
@@ -22,7 +22,7 @@ class LanguageSelector extends Component {
           <div className='pr4 flex items-center lh-copy charcoal f5 fw5' style={{ height: 40 }}>
             {getCurrentLanguage()}
           </div>
-          <Button className="tc" bg='bg-navy' minWidth={100} onClick={this.onLanguageEditOpen}>
+          <Button className="tc" bg='bg-teal' minWidth={100} onClick={this.onLanguageEditOpen}>
             {t('app:actions.change')}
           </Button>
         </div>

diff --git a/src/index.css b/src/index.css
@@ -17,7 +17,7 @@ body {
 }
 
 html, body, #root {
-  height: 100%;
+  min-height: 100%;
 }
 
 .appOverlay {

diff --git a/src/lib/tours.js b/src/lib/tours.js
@@ -224,40 +224,59 @@ export const settingsTour = {
     {
       content: <div className='montserrat charcoal'>
         <h2 className='f3 fw4'>{t('tour.step2.title')}</h2>
-        <Trans i18nKey='tour.step2.paragraph1' t={t}>
+        <p className='tl f6'>{t('tour.step2.paragraph1')}</p>
+      </div>,
+      placement: 'auto',
+      target: '.joyride-settings-customapi'
+    },
+    {
+      content: <div className='montserrat charcoal'>
+        <h2 className='f3 fw4'>{t('tour.step3.title')}</h2>
+        <Trans i18nKey='tour.step3.paragraph1' t={t}>
+          <p className='tl f6'>If you have accounts with third-party remote pinning services, add them here so you can pin/unpin items to those services directly from the Files screen. You can learn more about third-party pinning services in the <a className='teal link' href='https://docs.ipfs.io/how-to/work-with-pinning-services' rel='noopener noreferrer' target='_blank'>IPFS Docs</a>.
+          </p>
+        </Trans>
+      </div>,
+      placement: 'auto',
+      target: '.joyride-settings-pinning'
+    },
+    {
+      content: <div className='montserrat charcoal'>
+        <h2 className='f3 fw4'>{t('tour.step4.title')}</h2>
+        <Trans i18nKey='tour.step4.paragraph1' t={t}>
           <p className='tl f6'>You can change the language of the Web UI.
           If your preferred language isn't available, head over our project page in <a className='teal link' href='https://www.transifex.com/ipfs/ipfs-webui/translate/' rel='noopener noreferrer' target='_blank'>Transifex</a> to help us translate!
           </p>
         </Trans>
       </div>,
-      placement: 'bottom',
+      placement: 'auto',
       target: '.joyride-settings-language'
     },
     {
       content: <div className='montserrat charcoal'>
-        <h2 className='f3 fw4'>{t('tour.step3.title')}</h2>
-        <p className='tl f6'>{t('tour.step3.paragraph1')}</p>
-        <p className='tl f6'>{t('tour.step3.paragraph2')}</p>
+        <h2 className='f3 fw4'>{t('tour.step5.title')}</h2>
+        <p className='tl f6'>{t('tour.step5.paragraph1')}</p>
+        <p className='tl f6'>{t('tour.step5.paragraph2')}</p>
       </div>,
-      placement: 'bottom',
+      placement: 'auto',
       target: '.joyride-settings-analytics'
     },
     {
       content: <div className='montserrat charcoal'>
-        <h2 className='f3 fw4'>{t('tour.step4.title')}</h2>
-        <p className='tl f6'>{t('tour.step4.paragraph1')}</p>
+        <h2 className='f3 fw4'>{t('tour.step6.title')}</h2>
+        <p className='tl f6'>{t('tour.step6.paragraph1')}</p>
       </div>,
-      placement: 'top',
-      target: '.joyride-settings-customapi'
+      placement: 'auto',
+      target: '.joyride-settings-tutormode'
     },
     {
       content: <div className='montserrat charcoal'>
-        <h2 className='f3 fw4'>{t('tour.step5.title')}</h2>
-        <p className='tl f6'>{t('tour.step5.paragraph1')}</p>
-        <p className='tl f6'>{t('tour.step5.paragraph2')}</p>
+        <h2 className='f3 fw4'>{t('tour.step7.title')}</h2>
+        <p className='tl f6'>{t('tour.step7.paragraph1')}</p>
+        <p className='tl f6'>{t('tour.step7.paragraph2')}</p>
       </div>,
       locale: { last: t('tour.finish') },
-      placement: 'top',
+      placement: 'auto',
       target: '.joyride-settings-config'
     }
   ],

diff --git a/src/settings/SettingsPage.js b/src/settings/SettingsPage.js
@@ -58,7 +58,7 @@ export const SettingsPage = ({
       </div>
     </Box>
 
-    <Box className='mb3 pa4-l pa2'>
+    <Box className='mb3 pa4-l pa2 joyride-settings-pinning'>
       <Title>{t('pinningServices.title')}</Title>
       {/* <Trans i18nKey='pinningServices.description'>
         <p className='ma0 mr2 lh-copy charcoal f6'>
@@ -86,7 +86,7 @@ export const SettingsPage = ({
 
     <Experiments t={t} />
 
-    <Box className='mb3 pa4-l pa2'>
+    <Box className='mb3 pa4-l pa2 joyride-settings-tutormode'>
       <div className='charcoal'>
         <Title>{t('cliTutorMode')}</Title>
         <Checkbox className='dib' onChange={doToggleCliTutorMode} checked={isCliTutorModeEnabled}
@@ -98,47 +98,49 @@ export const SettingsPage = ({
     </Box>
 
     { isIpfsConnected &&
-    (<Box className='mb3 pa4-l pa2 joyride-settings-config'>
-      <Title>{t('config')}</Title>
-      <div className='flex pb3'>
-        <div className='flex-auto'>
-          <div className='mw7'>
-            <SettingsInfo
-              t={t}
-              tReady={tReady}
-              config={config}
-              isIpfsConnected={isIpfsConnected}
-              isConfigBlocked={isConfigBlocked}
-              isLoading={isLoading}
-              hasExternalChanges={hasExternalChanges}
-              hasSaveFailed={hasSaveFailed}
-              hasSaveSucceded={hasSaveSucceded} />
+    (<Box className='mb3 pa4-l pa2'>
+      <div className='joyride-settings-config'>
+        <Title>{t('config')}</Title>
+        <div className='flex pb3'>
+          <div className='flex-auto'>
+            <div className='mw7'>
+              <SettingsInfo
+                t={t}
+                tReady={tReady}
+                config={config}
+                isIpfsConnected={isIpfsConnected}
+                isConfigBlocked={isConfigBlocked}
+                isLoading={isLoading}
+                hasExternalChanges={hasExternalChanges}
+                hasSaveFailed={hasSaveFailed}
+                hasSaveSucceded={hasSaveSucceded} />
+            </div>
           </div>
+          { config ? (
+            <div className='flex flex-column justify-center flex-row-l items-center-l'>
+              <CliTutorMode showIcon={true} config={config} t={t} command={command}/>
+              <Button
+                minWidth={100}
+                height={40}
+                bg='bg-charcoal'
+                className='tc'
+                disabled={isSaving || (!hasLocalChanges && !hasExternalChanges)}
+                onClick={onReset}>
+                {t('app:actions.reset')}
+              </Button>
+              <SaveButton
+                t={t}
+                tReady={tReady}
+                hasErrors={hasErrors}
+                hasSaveFailed={hasSaveFailed}
+                hasSaveSucceded={hasSaveSucceded}
+                hasLocalChanges={hasLocalChanges}
+                hasExternalChanges={hasExternalChanges}
+                isSaving={isSaving}
+                onClick={onSave} />
+            </div>
+          ) : null }
         </div>
-        { config ? (
-          <div className='flex flex-column justify-center flex-row-l items-center-l'>
-            <CliTutorMode showIcon={true} config={config} t={t} command={command}/>
-            <Button
-              minWidth={100}
-              height={40}
-              bg='bg-charcoal'
-              className='tc'
-              disabled={isSaving || (!hasLocalChanges && !hasExternalChanges)}
-              onClick={onReset}>
-              {t('app:actions.reset')}
-            </Button>
-            <SaveButton
-              t={t}
-              tReady={tReady}
-              hasErrors={hasErrors}
-              hasSaveFailed={hasSaveFailed}
-              hasSaveSucceded={hasSaveSucceded}
-              hasLocalChanges={hasLocalChanges}
-              hasExternalChanges={hasExternalChanges}
-              isSaving={isSaving}
-              onClick={onSave} />
-          </div>
-        ) : null }
       </div>
       { config ? (
         <JsonEditor