Refactor tooltip modal to use react

Signed-off-by: Lucian <lucian.buzzo@gmail.com>

lib/gui/app/components/image-selector/image-selector.jsx

@@ -99,12 +99,14 @@ class ImageSelector extends React.Component {
 
     this.state = {
       ...getState(),
-      warning: null
+      warning: null,
+      showImageDetails: false
     }
 
     this.openImageSelector = this.openImageSelector.bind(this)
     this.reselectImage = this.reselectImage.bind(this)
     this.handleOnDrop = this.handleOnDrop.bind(this)
+    this.showSelectedImageDetails = this.showSelectedImageDetails.bind(this)
   }
 
   componentDidMount () {
@@ -285,12 +287,26 @@ class ImageSelector extends React.Component {
     }
   }
 
+  showSelectedImageDetails () {
+    analytics.logEvent('Show selected image tooltip', {
+      imagePath: selectionState.getImagePath(),
+      flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+      applicationSessionUuid: store.getState().toJS().applicationSessionUuid
+    })
+
+    this.setState({
+      showImageDetails: true
+    })
+  }
+
   // TODO add a visual change when dragging a file over the selector
   render () {
     const {
-      flashing,
+      flashing
-      showSelectedImageDetails
     } = this.props
+    const {
+      showImageDetails
+    } = this.state
 
     const hasImage = selectionState.hasImage()
 
@@ -315,7 +331,7 @@ class ImageSelector extends React.Component {
               <React.Fragment>
                 <StepNameButton
                   plain
-                  onClick={showSelectedImageDetails}
+                  onClick={this.showSelectedImageDetails}
                   tooltip={imageBasename}
                 >
                   {/* eslint-disable no-magic-numbers */}
@@ -376,14 +392,24 @@ class ImageSelector extends React.Component {
             <ModalText dangerouslySetInnerHTML={{ __html: this.state.warning.message }} />
           </Modal>
         )}
+
+        {showImageDetails && (
+          <Modal
+            title="Image File Name"
+            done={() => {
+              this.setState({ showImageDetails: false })
+            }}
+          >
+            {selectionState.getImagePath()}
+          </Modal>
+        )}
       </ThemedProvider>
     )
   }
 }
 
 ImageSelector.propTypes = {
-  flashing: propTypes.bool,
+  flashing: propTypes.bool
-  showSelectedImageDetails: propTypes.func
 }
 
 module.exports = ImageSelector

lib/gui/app/components/tooltip-modal/controllers/tooltip-modal.js

@@ -1,38 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-module.exports = function ($uibModalInstance, tooltipData) {
-  /**
-   * @summary Tooltip data
-   * @type {Object}
-   * @public
-   */
-  this.data = tooltipData
-
-  /**
-   * @summary Close the modal
-   * @function
-   * @public
-   *
-   * @example
-   * TooltipModalController.closeModal();
-   */
-  this.closeModal = () => {
-    $uibModalInstance.dismiss()
-  }
-}

lib/gui/app/components/tooltip-modal/services/tooltip-modal.js

@@ -1,49 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const _ = require('lodash')
-
-module.exports = function (ModalService) {
-  /**
-   * @summary Open the tooltip modal
-   * @function
-   * @public
-   *
-   * @param {Object} options - tooltip options
-   * @param {String} options.title - tooltip title
-   * @param {String} options.message - tooltip message
-   * @returns {Promise}
-   *
-   * @example
-   * TooltipModalService.show({
-   *   title: 'Important tooltip',
-   *   message: 'Tooltip contents'
-   * });
-   */
-  this.show = (options) => {
-    return ModalService.open({
-      name: 'tooltip',
-      template: require('../templates/tooltip-modal.tpl.html'),
-      controller: 'TooltipModalController as modal',
-      size: 'tooltip-modal',
-      resolve: {
-        tooltipData: _.constant(options)
-      }
-    }).result
-  }
-}

lib/gui/app/components/tooltip-modal/styles/_tooltip-modal.scss

@@ -1,23 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.modal-tooltip-modal .modal-body {
-  text-align: center;
-  margin: 15px;
-  color: $palette-theme-light-foreground;
-  background-color: darken($palette-theme-light-background, 5%);
-  word-wrap: break-word;
-}

lib/gui/app/components/tooltip-modal/templates/tooltip-modal.tpl.html

@@ -1,6 +0,0 @@
-<div class="modal-header">
-  <h4 class="modal-title">{{ ::modal.data.title }}</h4>
-  <button class="close" ng-click="modal.closeModal()">&times;</button>
-</div>
-
-<div class="modal-body">{{ ::modal.data.message }}</div>

lib/gui/app/components/tooltip-modal/tooltip-modal.js

@@ -1,32 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.TooltipModal
- */
-
-const angular = require('angular')
-const MODULE_NAME = 'Etcher.Components.TooltipModal'
-const TooltipModal = angular.module(MODULE_NAME, [
-  require('../modal/modal')
-])
-
-TooltipModal.controller('TooltipModalController', require('./controllers/tooltip-modal'))
-TooltipModal.service('TooltipModalService', require('./services/tooltip-modal'))
-
-module.exports = MODULE_NAME

lib/gui/app/pages/main/controllers/main.js

@@ -29,7 +29,6 @@ const messages = require('../../../../../shared/messages')
 const prettyBytes = require('pretty-bytes')
 
 module.exports = function (
-  TooltipModalService,
   OSOpenExternalService,
   $filter,
   $scope
@@ -83,29 +82,6 @@ module.exports = function (
     return !selectionState.hasDrive() || this.shouldDriveStepBeDisabled()
   }
 
-  /**
-   * @summary Display a tooltip with the selected image details
-   * @function
-   * @public
-   *
-   * @returns {Promise}
-   *
-   * @example
-   * MainController.showSelectedImageDetails()
-   */
-  this.showSelectedImageDetails = () => {
-    analytics.logEvent('Show selected image tooltip', {
-      imagePath: selectionState.getImagePath(),
-      flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
-      applicationSessionUuid: store.getState().toJS().applicationSessionUuid
-    })
-
-    return TooltipModalService.show({
-      title: 'Image File Name',
-      message: selectionState.getImagePath()
-    }).catch(exceptionReporter.report)
-  }
-
   /**
    * @summary Get drive title based on device quantity
    * @function

lib/gui/app/pages/main/templates/main.tpl.html

@@ -2,7 +2,6 @@
   <div class="col-xs">
     <image-selector
       flashing="main.state.isFlashing()"
-      showSelectedImageDetails={main.showSelectedImageDetails}
     >
     </image-selector>
   </div>