Merge pull request #2158 from resin-io/utils-middle-ellipses

refactor: inline middle-ellipsis package as util

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

@@ -31,7 +31,6 @@ const MainPage = angular.module(MODULE_NAME, [
   'angularMoment',
 
   require('angular-ui-router'),
-  require('angular-middle-ellipses'),
   require('angular-seconds-to-date'),
 
   require('../../components/drive-selector/drive-selector'),
@@ -42,7 +41,8 @@ const MainPage = angular.module(MODULE_NAME, [
   require('../../os/open-external/open-external'),
   require('../../os/dropzone/dropzone'),
 
-  require('../../utils/byte-size/byte-size')
+  require('../../utils/byte-size/byte-size'),
+  require('../../utils/middle-ellipsis/filter')
 ])
 
 MainPage.controller('MainController', require('./controllers/main'))

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

@@ -24,7 +24,7 @@
             <span
               ng-click="main.showSelectedImageDetails()"
               class="step-image step-name"
-              ng-bind="main.selection.getImageName() || image.getImageBasename() | middleEllipses:20"
+              ng-bind="main.selection.getImageName() || image.getImageBasename() | middleEllipsis:20"
               uib-tooltip="{{ image.getImageBasename() }}"></span>
             <span class="step-image step-size">{{ main.selection.getImageSize() | closestUnit }}</span>
           </div>
@@ -67,8 +67,8 @@
             }">
             <span class="drive-step step-name"
               uib-tooltip="{{ drive.getDriveListLabel() }}">
-              <!-- middleEllipses errors on undefined, therefore fallback to empty string -->
-              {{ drive.getDrivesTitle() | middleEllipses:20 }}
+              <!-- middleEllipsis errors on undefined, therefore fallback to empty string -->
+              {{ drive.getDrivesTitle() | middleEllipsis:20 }}
             </span>
             <span class="step-drive step-size">{{ main.selection.getCurrentDrive().size | closestUnit }}</span>
             <span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"

lib/gui/app/utils/middle-ellipsis.js

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2018 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'
+
+/**
+ * @summary Truncate text from the middle with an ellipsis
+ * @public
+ * @function
+ *
+ * @param {String} input - input string
+ * @param {Number} limit - output limit
+ * @returns {String} truncated string
+ *
+ * @throws Will throw if `limit` < 3
+ *
+ * @example
+ * middleEllipsis('MyVeryLongString', 5)
+ * > 'My\u2026ng'
+ */
+module.exports = (input, limit) => {
+  const MIDDLE_ELLIPSIS_CHARACTER = '\u2026'
+  const MINIMUM_LENGTH = 3
+
+  // We can't provide a 100% expected result if the limit is less than 3. For example:
+  //
+  // If the limit == 2:
+  //   Should we display the first at last character without an ellipses in the middle?
+  //   Should we display just one character and an ellipses before or after?
+  //   Should we display nothing at all?
+  //
+  // If the limit == 1:
+  //   Should we display just one character?
+  //   Should we display just an ellipses?
+  //   Should we display nothing at all?
+  //
+  // Etc.
+  if (limit < MINIMUM_LENGTH) {
+    throw new Error('middleEllipsis: Limit should be at least 3')
+  }
+
+  // Do nothing, the string doesn't need truncation.
+  if (input.length <= limit) {
+    return input
+  }
+
+  /* eslint-disable no-magic-numbers */
+  const lengthOfTheSidesAfterTruncation = Math.floor((limit - 1) / 2)
+  const finalLeftPart = input.slice(0, lengthOfTheSidesAfterTruncation)
+  const finalRightPart = input.slice(input.length - lengthOfTheSidesAfterTruncation)
+  /* eslint-enable no-magic-numbers */
+
+  return finalLeftPart + MIDDLE_ELLIPSIS_CHARACTER + finalRightPart
+}

lib/gui/app/utils/middle-ellipsis/filter.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2018 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'
+
+/**
+ * The purpose of this module is to provide utilities
+ * to work with sizes in bytes.
+ *
+ * @module Etcher.Utils.MiddleEllipsis
+ */
+
+const _ = require('lodash')
+const angular = require('angular')
+const middleEllipsis = require('../middle-ellipsis')
+
+const MODULE_NAME = 'Etcher.Utils.MiddleEllipsis'
+const MiddleEllipsis = angular.module(MODULE_NAME, [])
+
+/* eslint-disable lodash/prefer-lodash-method */
+
+MiddleEllipsis.filter('middleEllipsis', _.constant(middleEllipsis))
+
+/* eslint-enable lodash/prefer-lodash-method */
+
+module.exports = MODULE_NAME

npm-shrinkwrap.json

@@ -120,10 +120,6 @@
         }
       }
     },
-    "angular-middle-ellipses": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/angular-middle-ellipses/-/angular-middle-ellipses-1.0.0.tgz"
-    },
     "angular-mocks": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/angular-mocks/-/angular-mocks-1.6.3.tgz",

package.json

@@ -40,7 +40,6 @@
   "dependencies": {
     "angular": "1.6.3",
     "angular-if-state": "1.0.0",
-    "angular-middle-ellipses": "1.0.0",
     "angular-moment": "1.0.1",
     "angular-seconds-to-date": "1.0.0",
     "angular-ui-bootstrap": "2.5.0",

tests/gui/utils/middle-ellipsis.spec.js

@@ -0,0 +1,46 @@
+
+/*
+ * Copyright 2018 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 m = require('mochainon')
+const middleEllipsis = require('../../../lib/gui/app/utils/middle-ellipsis')
+console.log(middleEllipsis)
+
+describe('Browser: MiddleEllipsis', function () {
+  describe('.middleEllipsis()', function () {
+    it('should throw error if limit < 3', function () {
+      m.chai.expect(() => {
+        middleEllipsis('No', 2)
+      }).to.throw('middleEllipsis: Limit should be at least 3')
+    })
+
+    describe('given the input length is greater than the limit', function () {
+      it('should always truncate input to an odd length', function () {
+        const alphabet = 'abcdefghijklmnopqrstuvwxyz'
+        m.chai.expect(middleEllipsis(alphabet, 3)).to.have.a.lengthOf(3)
+        m.chai.expect(middleEllipsis(alphabet, 4)).to.have.a.lengthOf(3)
+        m.chai.expect(middleEllipsis(alphabet, 5)).to.have.a.lengthOf(5)
+        m.chai.expect(middleEllipsis(alphabet, 6)).to.have.a.lengthOf(5)
+      })
+    })
+
+    it('should return the input if it is within the bounds of limit', function () {
+      m.chai.expect(middleEllipsis('Hello', 10)).to.equal('Hello')
+    })
+  })
+})