Fix issue with creating unique keys from user input

Encode and unescape before base64 encoding.
Added tests for Settings.js and for the utility function toKeyString to demonstrate this.

Author: oskarhane

src/browser/components/Tables.jsx

@@ -17,9 +17,9 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-/* global btoa */
 import React from 'react'
 import styled from 'styled-components'
+import { toKeyString } from 'services/utils'
 
 const StyledTable = styled.table`
   border-radius: 4px;
@@ -42,8 +42,12 @@ const StyledTh = styled.th`
   border-color: #ddd;
   padding: 10px 15px;
 `
-const StyledTd = styled.td`padding: 5px;`
-const StyledTdKey = styled(StyledTd)`font-weight: bold;`
+const StyledTd = styled.td`
+  padding: 5px;
+`
+const StyledTdKey = styled(StyledTd)`
+  font-weight: bold;
+`
 export const SysInfoTableContainer = styled.div`
   display: flex;
   flex-flow: row wrap;
@@ -80,7 +84,7 @@ export const SysInfoTableEntry = ({
           const mappedValue = getValue(value, mapper)
           const val = mappedValue || missingValuePlaceholder
           return mappedValue || !optional ? (
-            <StyledTdKey key={btoa(val)}>{val}</StyledTdKey>
+            <StyledTdKey key={toKeyString(val)}>{val}</StyledTdKey>
           ) : null
         })}
       </StyledTr>
@@ -93,7 +97,7 @@ export const SysInfoTableEntry = ({
           const mappedValue = getValue(value, mapper)
           const val = mappedValue || missingValuePlaceholder
           return mappedValue || !optional ? (
-            <StyledTd key={btoa(val)}>{val}</StyledTd>
+            <StyledTd key={toKeyString(val)}>{val}</StyledTd>
           ) : null
         })}
       </StyledTr>

src/browser/modules/Sidebar/Favorites.jsx

@@ -18,7 +18,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* global btoa */
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { withBus } from 'react-suber'
@@ -27,6 +26,7 @@ import * as favorite from 'shared/modules/favorites/favoritesDuck'
 import * as folder from 'shared/modules/favorites/foldersDuck'
 import { getSettings } from 'shared/modules/settings/settingsDuck'
 import { executeCommand } from 'shared/modules/commands/commandsDuck'
+import { toKeyString } from 'services/utils'
 
 import Render from 'browser-components/Render'
 import Favorite from './Favorite'
@@ -48,7 +48,7 @@ const mapFavorites = (favorites, props, isChild, moveAction) => {
     return (
       <Favorite
         entry={entry}
-        key={`${btoa(entry.name + entry.content + entry.id)}`}
+        key={`${toKeyString(entry.name + entry.content + entry.id)}`}
         id={entry.id}
         name={entry.name}
         content={entry.content}
@@ -257,5 +257,10 @@ const mapDispatchToProps = (dispatch, ownProps) => {
   }
 }
 export default DragDropContext(HTML5Backend)(
-  withBus(connect(mapStateToProps, mapDispatchToProps)(Favorites))
+  withBus(
+    connect(
+      mapStateToProps,
+      mapDispatchToProps
+    )(Favorites)
+  )
 )

src/browser/modules/Sidebar/Settings.jsx

@@ -17,7 +17,6 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-/* global btoa */
 import React from 'react'
 import { connect } from 'react-redux'
 import * as actions from 'shared/modules/settings/settingsDuck'
@@ -35,6 +34,7 @@ import {
   StyledSettingLabel,
   StyledSettingTextInput
 } from './styled'
+import { toKeyString } from 'services/utils'
 
 const visualSettings = [
   {
@@ -140,20 +140,24 @@ const visualSettings = [
   }
 ]
 
-export const Settings = ({ settings, onSettingsSave = () => {} }) => {
+export const Settings = ({
+  settings,
+  visualSettings,
+  onSettingsSave = () => {}
+}) => {
   if (!settings) return null
-  const mappedSettings = visualSettings.map((visualSetting, oi) => {
+  const mappedSettings = visualSettings.map(visualSetting => {
     const title = <DrawerSubHeader>{visualSetting.title}</DrawerSubHeader>
     const mapSettings = visualSetting.settings
-      .map((settingObj, i) => {
+      .map(settingObj => {
         const setting = Object.keys(settingObj)[0]
         if (typeof settings[setting] === 'undefined') return false
         const visual = settingObj[setting].displayName
         const tooltip = settingObj[setting].tooltip || ''
 
         if (!settingObj[setting].type || settingObj[setting].type === 'input') {
           return (
-            <StyledSetting key={btoa(visual)}>
+            <StyledSetting key={toKeyString(visual)}>
               <StyledSettingLabel title={tooltip}>{visual}</StyledSettingLabel>
               <StyledSettingTextInput
                 onChange={event => {
@@ -168,7 +172,7 @@ export const Settings = ({ settings, onSettingsSave = () => {} }) => {
           )
         } else if (settingObj[setting].type === 'radio') {
           return (
-            <StyledSetting key={btoa(visual)}>
+            <StyledSetting key={toKeyString(visual)}>
               <StyledSettingLabel title={tooltip}>{visual}</StyledSettingLabel>
               <RadioSelector
                 options={settingObj[setting].options}
@@ -182,7 +186,7 @@ export const Settings = ({ settings, onSettingsSave = () => {} }) => {
           )
         } else if (settingObj[setting].type === 'checkbox') {
           return (
-            <StyledSetting key={btoa(visual)}>
+            <StyledSetting key={toKeyString(visual)}>
               <CheckboxSelector
                 onChange={event => {
                   settings[setting] = event.target.checked
@@ -197,7 +201,7 @@ export const Settings = ({ settings, onSettingsSave = () => {} }) => {
       })
       .filter(setting => setting !== false)
     return (
-      <React.Fragment key={btoa(visualSetting.title)}>
+      <React.Fragment key={toKeyString(visualSetting.title)}>
         {title}
         {mapSettings}
       </React.Fragment>
@@ -218,7 +222,8 @@ export const Settings = ({ settings, onSettingsSave = () => {} }) => {
 
 const mapStateToProps = state => {
   return {
-    settings: state.settings
+    settings: state.settings,
+    visualSettings
   }
 }
 
@@ -230,4 +235,7 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Settings)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Settings)

src/browser/modules/Sidebar/Settings.test.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2002-2018 "Neo4j, Inc"
+ * Network Engine for Objects in Lund AB [http://neotechnology.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* global describe, beforeEach, afterEach, test, expect */
+import React from 'react'
+import { render, cleanup } from 'react-testing-library'
+import { Settings } from './Settings'
+
+afterEach(cleanup)
+
+test('Settings renders with strange characters in display name', () => {
+  // Given
+  const settings = { testSetting: true }
+  const visualSettings = [
+    {
+      title: 'Test åäö settings',
+      settings: [
+        {
+          testSetting: {
+            displayName: 'åäö üüü'
+          }
+        }
+      ]
+    }
+  ]
+
+  // When
+  const { container } = render(
+    <Settings settings={settings} visualSettings={visualSettings} />
+  )
+
+  // Then
+  expect(container).toMatchSnapshot()
+})

src/browser/modules/Sidebar/__snapshots__/Settings.test.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Settings renders with strange characters in display name 1`] = `
+<div>
+  <div
+    class="sc-bdVaJa fFGtIw"
+    id="db-settings"
+  >
+    <h4
+      class="sc-bwzfXH gJZKwg"
+    >
+      Browser Settings
+    </h4>
+    <div
+      class="sc-bZQynM hYejcx"
+    >
+      <div
+        class="sc-ifAKCX jDKYZc"
+      >
+        <div
+          class="sc-EHOje fyzZhj"
+        >
+          <h5
+            class="sc-bxivhb jqgGlu"
+          >
+            Test åäö settings
+          </h5>
+          <div
+            class="sc-VigVT kULqyn"
+          >
+            <div
+              class="sc-jTzLTM cjMpzP"
+              title=""
+            >
+              åäö üüü
+            </div>
+            <input
+              class="testSetting sc-fjdhpX hFlOzk"
+              title=""
+              value="true"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/shared/services/utils.js

@@ -17,6 +17,8 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+/* global btoa */
+
 import parseUrl from 'url-parse'
 
 export const deepEquals = (x, y) => {
@@ -258,7 +260,9 @@ export const stringifyMod = (
 ) => {
   prettyLevel = !prettyLevel
     ? false
-    : prettyLevel === true ? 1 : parseInt(prettyLevel)
+    : prettyLevel === true
+      ? 1
+      : parseInt(prettyLevel)
   const nextPrettyLevel = prettyLevel ? prettyLevel + 1 : false
   const newLine = prettyLevel ? '\n' : ''
   const indentation =
@@ -395,3 +399,5 @@ export const optionalToString = v =>
   ![null, undefined].includes(v) && typeof v.toString === 'function'
     ? v.toString()
     : v
+
+export const toKeyString = str => btoa(encodeURIComponent(str))

src/shared/services/utils.test.js

@@ -520,3 +520,21 @@ describe('Object props manipulation', () => {
     })
   })
 })
+describe('toKeyString', () => {
+  it('can encode strings with special characters', () => {
+    // Given
+    const strs = [
+      { str: 'hey ho ', expect: 'aGV5JTIwaG8lMjAlRUYlQTMlQkY=' },
+      {
+        str: '✓ à la mode',
+        expect: 'JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl'
+      },
+      { str: '😍', expect: 'JUYwJTlGJTk4JThE' }
+    ]
+
+    // When & Then
+    strs.forEach(str => {
+      expect(utils.toKeyString(str.str)).toEqual(str.expect)
+    })
+  })
+})