Merge pull request #183 from atom/move-package-outdated-notice-into-popover

Move package outdated notice into popover

Author: Antonio Scandurra

lib/package-outdated-component.js

@@ -0,0 +1,34 @@
+const etch = require('etch')
+const $ = etch.dom
+
+module.exports =
+class PackageOutdatedComponent {
+  constructor (props) {
+    this.props = props
+    etch.initialize(this)
+  }
+
+  update (props) {
+    Object.assign(this.props, props)
+    return etch.update(this)
+  }
+
+  render () {
+    return $.div({className: 'PackageOutdatedComponent'},
+      $.h3(null, 'Teletype is out of date'),
+      $.p(null, 'You will need to update the package to resume collaborating.'),
+      $.button(
+        {
+          ref: 'viewPackageSettingsButton',
+          className: 'btn btn-primary btn-sm',
+          onClick: this.viewPackageSettings
+        },
+        'View Package Settings'
+      )
+    )
+  }
+
+  viewPackageSettings () {
+    return this.props.workspace.open('atom://config/packages/teletype')
+  }
+}

lib/popover-component.js

@@ -2,12 +2,15 @@ const etch = require('etch')
 const $ = etch.dom
 const PortalListComponent = require('./portal-list-component')
 const SignInComponent = require('./sign-in-component')
+const PackageOutdatedComponent = require('./package-outdated-component')
 
 module.exports =
 class PopoverComponent {
   constructor (props) {
     this.props = props
-    this.props.authenticationProvider.onDidChange(() => { this.update() })
+    if (this.props.authenticationProvider) {
+      this.props.authenticationProvider.onDidChange(() => { this.update() })
+    }
     etch.initialize(this)
   }
 
@@ -17,12 +20,17 @@ class PopoverComponent {
 
   render () {
     const {
-      authenticationProvider, portalBindingManager,
-      commandRegistry, credentialCache, clipboard
+      isClientOutdated, authenticationProvider, portalBindingManager,
+      commandRegistry, credentialCache, clipboard, workspace
     } = this.props
 
     let activeComponent
-    if (this.props.authenticationProvider.isSignedIn()) {
+    if (isClientOutdated) {
+      activeComponent = $(PackageOutdatedComponent, {
+        ref: 'packageOutdatedComponent',
+        workspace
+      })
+    } else if (this.props.authenticationProvider.isSignedIn()) {
       activeComponent = $(PortalListComponent, {
         ref: 'portalListComponent',
         localUserIdentity: authenticationProvider.getIdentity(),

lib/portal-status-bar-indicator.js

@@ -1,9 +1,12 @@
+const {CompositeDisposable} = require('atom')
 const PopoverComponent = require('./popover-component')
 
 module.exports =
 class PortalStatusBarIndicator {
   constructor (props) {
-    this.element = buildElement()
+    this.props = props
+    this.subscriptions = new CompositeDisposable()
+    this.element = buildElement(props)
     this.popoverComponent = new PopoverComponent(props)
     this.tooltip = props.tooltipManager.add(
       this.element,
@@ -14,10 +17,13 @@ class PortalStatusBarIndicator {
         placement: 'top'
       }
     )
-    this.portalBindingManager = props.portalBindingManager
-    this.subscriptions = this.portalBindingManager.onDidChange(() => {
-      this.updatePortalStatus()
-    })
+
+    if (props.portalBindingManager) {
+      this.portalBindingManager = props.portalBindingManager
+      this.subscriptions.add(this.portalBindingManager.onDidChange(() => {
+        this.updatePortalStatus()
+      }))
+    }
   }
 
   showPopover () {
@@ -43,9 +49,10 @@ class PortalStatusBarIndicator {
   }
 }
 
-function buildElement () {
+function buildElement (props) {
   const anchor = document.createElement('a')
   anchor.classList.add('PortalStatusBarIndicator', 'inline-block')
+  if (props.isClientOutdated) anchor.classList.add('outdated')
 
   const icon = document.createElement('span')
   icon.classList.add('icon', 'icon-radio-tower')

lib/teletype-package.js

@@ -97,21 +97,17 @@ class TeletypePackage {
 
   async consumeStatusBar (statusBar) {
     const teletypeClient = await this.getClient()
-    if (!teletypeClient) return
-
     const portalBindingManager = await this.getPortalBindingManager()
-    if (!portalBindingManager) return
-
     const authenticationProvider = await this.getAuthenticationProvider()
-    if (!authenticationProvider) return
-
     this.portalStatusBarIndicator = new PortalStatusBarIndicator({
       teletypeClient,
       portalBindingManager,
       authenticationProvider,
+      isClientOutdated: this.isClientOutdated,
       tooltipManager: this.tooltipManager,
       commandRegistry: this.commandRegistry,
-      clipboard: this.clipboard
+      clipboard: this.clipboard,
+      workspace: this.workspace
     })
 
     const PRIORITY_BETWEEN_BRANCH_NAME_AND_GRAMMAR = -40
@@ -207,28 +203,14 @@ class TeletypePackage {
       await this.client.initialize()
       return this.client
     } catch (error) {
-      let message, description, buttons
       if (error instanceof Errors.ClientOutOfDateError) {
-        message = 'The teletype package is out of date'
-        description = 'You will need to update the package to continue collaborating.'
-        buttons = [{
-          text: 'View Package Settings',
-          onDidClick: () => {
-            this.workspace.open('atom://config/packages/teletype')
-            notification.dismiss()
-          }
-        }]
+        this.isClientOutdated = true
       } else {
-        message = 'Failed to initialize the teletype package'
-        description = `Establishing a teletype connection failed with error: <code>${error.message}</code>`
-        buttons = null
+        this.notificationManager.addError('Failed to initialize the teletype package', {
+          description: `Establishing a teletype connection failed with error: <code>${error.message}</code>`,
+          dismissable: true
+        })
       }
-
-      const notification = this.notificationManager.addError(message, {
-        description,
-        buttons,
-        dismissable: true
-      })
     }
   }
 }

styles/teletype.less

@@ -17,6 +17,14 @@
       color: @text-color-info;
     }
   }
+
+  &.outdated {
+    color: @text-color-error;
+
+    &:hover {
+      color: @text-color-error;
+    }
+  }
 }
 
 .TeletypePopoverTooltip {
@@ -401,3 +409,9 @@
     }
   }
 }
+
+.PackageOutdatedComponent {
+  color: @text-color;
+  text-align: center;
+  padding: 0 @component-padding @component-padding @component-padding;
+}

test/teletype-package.test.js

@@ -861,42 +861,24 @@ suite('TeletypePackage', function () {
     const env = buildAtomEnvironment()
     const pack = await buildPackage(env, {signIn: false})
     pack.client.initialize = async function () {
-      await Promise.resolve()
       throw new Errors.ClientOutOfDateError()
     }
 
-    {
-      env.notifications.clear()
-
-      await pack.sharePortal()
-
-      assert.equal(env.notifications.getNotifications().length, 1)
-      const notification = env.notifications.getNotifications()[0]
-      assert.equal(notification.type, 'error')
-      assert.equal(notification.message, 'The teletype package is out of date')
-      const openedURIs = []
-      env.workspace.open = (uri) => openedURIs.push(uri)
-      notification.options.buttons[0].onDidClick()
-      assert.deepEqual(openedURIs, ['atom://config/packages/teletype'])
-      assert(notification.isDismissed())
-    }
+    await pack.consumeStatusBar(new FakeStatusBar())
+    const {portalStatusBarIndicator} = pack
+    const {popoverComponent} = portalStatusBarIndicator
+    const {packageOutdatedComponent} = popoverComponent.refs
 
+    assert(portalStatusBarIndicator.element.classList.contains('outdated'))
 
-    {
-      env.notifications.clear()
+    assert(packageOutdatedComponent)
+    assert(!popoverComponent.refs.portalListComponent)
+    assert(!popoverComponent.refs.signInComponent)
 
-      await pack.joinPortal()
-
-      assert.equal(env.notifications.getNotifications().length, 1)
-      const notification = env.notifications.getNotifications()[0]
-      assert.equal(notification.type, 'error')
-      assert.equal(notification.message, 'The teletype package is out of date')
-      const openedURIs = []
-      env.workspace.open = (uri) => openedURIs.push(uri)
-      notification.options.buttons[0].onDidClick()
-      assert.deepEqual(openedURIs, ['atom://config/packages/teletype'])
-      assert(notification.isDismissed())
-    }
+    const openedURIs = []
+    env.workspace.open = (uri) => openedURIs.push(uri)
+    packageOutdatedComponent.refs.viewPackageSettingsButton.click()
+    assert.deepEqual(openedURIs, ['atom://config/packages/teletype'])
   })
 
   test('reports errors attempting to initialize the client', async () => {