[default-layout] Show 'Up to date' instead of specific version number

sanity-io · Feb 2, 2018 · ec303f9 · ec303f9
1 parent 089d41a
commit ec303f9
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 30 deletions.
diff --git a/packages/@sanity/default-layout/src/components/CurrentVersionsDialog.js b/packages/@sanity/default-layout/src/components/CurrentVersionsDialog.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Button from 'part:@sanity/components/buttons/default'
+import Dialog from 'part:@sanity/components/dialogs/default'
+import versions from 'sanity:versions'
+import styles from './styles/UpdateNotifierDialog.css'
+
+function CurrentVersionsDialog(props) {
+  const {onClose} = props
+  return (
+    <Dialog isOpen onClose={onClose}>
+      <div className={styles.content}>
+        <div>
+          <h2>Studio is up to date</h2>
+
+          <table className={styles.versionsTable}>
+            <thead>
+              <tr>
+                <th>Module</th>
+                <th>Installed</th>
+                <th>Latest</th>
+              </tr>
+            </thead>
+            <tbody>
+              {Object.keys(versions).map(pkgName => (
+                <tr key={pkgName}>
+                  <td>{pkgName}</td>
+                  <td>{versions[pkgName]}</td>
+                  <td>{versions[pkgName]}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          <Button color="primary" onClick={onClose}>
+            Close
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+CurrentVersionsDialog.propTypes = {
+  onClose: PropTypes.func.isRequired
+}
+
+export default CurrentVersionsDialog
diff --git a/packages/@sanity/default-layout/src/components/UpdateNotifier.js b/packages/@sanity/default-layout/src/components/UpdateNotifier.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react'
 import WarningIcon from 'part:@sanity/base/warning-icon'
 import VersionChecker from 'part:@sanity/base/version-checker'
 import UpdateNotifierDialog from './UpdateNotifierDialog'
+import CurrentVersionsDialog from './CurrentVersionsDialog'
 import styles from './styles/UpdateNotifier.css'
 
 const logError = err => console.error(err)
@@ -34,30 +35,43 @@ class UpdateNotifier extends Component {
   }
 
   render() {
-    const {level, outdated, isUpToDate, isSupported, showUpdateNotifier} = this.state
+    const {
+      level,
+      outdated,
+      isUpToDate,
+      isSupported,
+      showUpdateNotifier
+    } = this.state
     const severity = isSupported ? level : 'high'
     const className = styles[classes[severity] || 'button']
+    const Dialog = isUpToDate ? CurrentVersionsDialog : UpdateNotifierDialog
 
     return (
       <div className={styles.container}>
         {showUpdateNotifier && (
-          <UpdateNotifierDialog
+          <Dialog
             severity={severity}
             outdated={outdated}
             onClose={this.handleHideUpdateNotifier}
           />
         )}
 
-        {!isUpToDate && (
-          <button onClick={this.handleShowUpdateNotifier} className={className}>
+        <button
+          type="button"
+          onClick={this.handleShowUpdateNotifier}
+          className={className}
+        >
+          {!isUpToDate && (
             <div className={styles.warningIcon}>
               <WarningIcon />
             </div>
-            <div className={styles.upgradeText}>Upgrade</div>
-          </button>
-        )}
-
-        <span>v{VersionChecker.getLatestInstalled()}</span>
+          )}
+          <div
+            className={isUpToDate ? styles.upToDateText : styles.upgradeText}
+          >
+            {isUpToDate ? 'Up to date' : 'Upgrade'}
+          </div>
+        </button>
       </div>
     )
   }

diff --git a/packages/@sanity/default-layout/src/components/UpdateNotifierDialog.js b/packages/@sanity/default-layout/src/components/UpdateNotifierDialog.js
@@ -2,7 +2,6 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import Button from 'part:@sanity/components/buttons/default'
 import Dialog from 'part:@sanity/components/dialogs/default'
-import VersionChecker from 'part:@sanity/base/version-checker'
 import styles from './styles/UpdateNotifierDialog.css'
 
 const upperFirst = str => `${str.slice(0, 1).toUpperCase()}${str.slice(1)}`
@@ -24,12 +23,6 @@ class UpdateNotifierDialog extends Component {
     outdated: []
   }
 
-  componentWillMount() {
-    VersionChecker.checkVersions({getOutdated: true})
-      .then(this.handleVersionReply)
-      .catch(this.handleError)
-  }
-
   renderTable() {
     const {outdated} = this.props
     return (
@@ -56,26 +49,29 @@ class UpdateNotifierDialog extends Component {
         </table>
 
         <p className={styles.upgradeText}>
-          To upgrade, run <code className={styles.code}>sanity upgrade</code> in your studio.
+          To upgrade, run <code className={styles.code}>sanity upgrade</code> in
+          your studio.
         </p>
       </div>
     )
   }
 
-  renderInfo() {
-    return this.renderTable()
-  }
-
   renderContactDeveloper() {
     const {severity} = this.props
     return (
       <div>
         <p>You are running an outdated studio.</p>
 
         {severity === 'high' ? (
-          <p>Please get in touch with your developers and ask them to upgrade it for you.</p>
+          <p>
+            Please get in touch with your developers and ask them to upgrade it
+            for you.
+          </p>
         ) : (
-          <p>Consider getting in touch with your developers and ask them to upgrade it for you.</p>
+          <p>
+            Consider getting in touch with your developers and ask them to
+            upgrade it for you.
+          </p>
         )}
 
         <details>
@@ -89,17 +85,18 @@ class UpdateNotifierDialog extends Component {
   render() {
     const {severity, onClose} = this.props
     return (
-      <Dialog
-        isOpen
-        onClose={onClose}
-      >
+      <Dialog isOpen onClose={onClose}>
         <div className={styles.content}>
           <div>
             <h2>
-              {severity === 'low' ? 'New versions available' : 'Studio is outdated'}
+              {severity === 'low'
+                ? 'New versions available'
+                : 'Studio is outdated'}
             </h2>
-            {__DEV__ ? this.renderInfo() : this.renderContactDeveloper()}
-            <Button color="primary" onClick={onClose}>Close</Button>
+            {__DEV__ ? this.renderTable() : this.renderContactDeveloper()}
+            <Button color="primary" onClick={onClose}>
+              Close
+            </Button>
           </div>
         </div>
       </Dialog>

diff --git a/packages/@sanity/default-layout/src/components/styles/UpdateNotifier.css b/packages/@sanity/default-layout/src/components/styles/UpdateNotifier.css
@@ -63,3 +63,7 @@
   composes: button;
   color: var(--state-info-color);
 }
+
+.upToDateText {
+  color: color(var(--white) a(40%));
+}