fix(App.js): Fixed broken toolbar icons not rendering with base tag removed

src/App.js

@@ -15,11 +15,11 @@ import OHIFDicomHtmlExtension from 'ohif-dicom-html-extension'
 import OHIFDicomMicroscopyExtension from 'ohif-dicom-microscopy-extension'
 import { OidcProvider, reducer as oidcReducer } from 'redux-oidc'
 import {
+  getDefaultToolbarButtons,
   getUserManagerForOpenIdConnectClient,
   initWebWorkers,
 } from './utils/index.js'
 
-const Icons = 'icons.svg'
 const { ExtensionManager } = OHIF.extensions
 const { reducers, localStorage } = OHIF.redux
 
@@ -35,90 +35,6 @@ store.subscribe(() => {
   })
 })
 
-const defaultButtons = [
-  {
-    command: 'StackScroll',
-    type: 'tool',
-    text: 'Stack Scroll',
-    svgUrl: `${Icons}#icon-tools-stack-scroll`,
-    active: false,
-  },
-  {
-    command: 'Zoom',
-    type: 'tool',
-    text: 'Zoom',
-    svgUrl: `${Icons}#icon-tools-zoom`,
-    active: false,
-  },
-  {
-    command: 'Wwwc',
-    type: 'tool',
-    text: 'Levels',
-    svgUrl: `${Icons}#icon-tools-levels`,
-    active: true,
-  },
-  {
-    command: 'Pan',
-    type: 'tool',
-    text: 'Pan',
-    svgUrl: `${Icons}#icon-tools-pan`,
-    active: false,
-  },
-  {
-    command: 'Length',
-    type: 'tool',
-    text: 'Length',
-    svgUrl: `${Icons}#icon-tools-measure-temp`,
-    active: false,
-  },
-  /*{
-      command: 'Annotate',
-      type: 'tool',
-      text: 'Annotate',
-      svgUrl: `${Icons}#icon-tools-measure-non-target`,
-      active: false
-  },*/
-  {
-    command: 'Angle',
-    type: 'tool',
-    text: 'Angle',
-    iconClasses: 'fa fa-angle-left',
-    active: false,
-  },
-  {
-    command: 'Bidirectional',
-    type: 'tool',
-    text: 'Bidirectional',
-    svgUrl: `${Icons}#icon-tools-measure-target`,
-    active: false,
-  },
-  {
-    command: 'Brush',
-    type: 'tool',
-    text: 'Brush',
-    iconClasses: 'fa fa-circle',
-    active: false,
-  },
-  {
-    command: 'FreehandMouse',
-    type: 'tool',
-    text: 'Freehand',
-    iconClasses: 'fa fa-star',
-    active: false,
-  },
-  {
-    command: 'reset',
-    type: 'command',
-    text: 'Reset',
-    svgUrl: `${Icons}#icon-tools-reset`,
-    active: false,
-  },
-]
-
-const buttonsAction = OHIF.redux.actions.setAvailableButtons(defaultButtons)
-
-store.dispatch(buttonsAction)
-
 const availableTools = [
   { name: 'Pan', mouseButtonMasks: [1, 4] },
   { name: 'Zoom', mouseButtonMasks: [1, 2] },
@@ -181,6 +97,13 @@ class App extends Component {
   constructor(props) {
     super(props)
 
+    //
+    const defaultButtons = getDefaultToolbarButtons(this.props.routerBasename)
+    const buttonsAction = OHIF.redux.actions.setAvailableButtons(defaultButtons)
+
+    store.dispatch(buttonsAction)
+
+    //
     this.userManager = getUserManagerForOpenIdConnectClient(
       store,
       this.props.oidc

src/utils/getDefaultToolbarButtons.js

@@ -0,0 +1,88 @@
+/**
+ *
+ * @param {String} [baseDirectory='/']
+ */
+export default function(baseDirectory = '/') {
+  const iconsFileName = 'icons.svg'
+  const relativePathToIcons = `${baseDirectory}${iconsFileName}`
+
+  return [
+    {
+      command: 'StackScroll',
+      type: 'tool',
+      text: 'Stack Scroll',
+      svgUrl: `${relativePathToIcons}#icon-tools-stack-scroll`,
+      active: false,
+    },
+    {
+      command: 'Zoom',
+      type: 'tool',
+      text: 'Zoom',
+      svgUrl: `${relativePathToIcons}#icon-tools-zoom`,
+      active: false,
+    },
+    {
+      command: 'Wwwc',
+      type: 'tool',
+      text: 'Levels',
+      svgUrl: `${relativePathToIcons}#icon-tools-levels`,
+      active: true,
+    },
+    {
+      command: 'Pan',
+      type: 'tool',
+      text: 'Pan',
+      svgUrl: `${relativePathToIcons}#icon-tools-pan`,
+      active: false,
+    },
+    {
+      command: 'Length',
+      type: 'tool',
+      text: 'Length',
+      svgUrl: `${relativePathToIcons}#icon-tools-measure-temp`,
+      active: false,
+    },
+    /*{
+        command: 'Annotate',
+        type: 'tool',
+        text: 'Annotate',
+        svgUrl: `${Icons}#icon-tools-measure-non-target`,
+        active: false
+    },*/
+    {
+      command: 'Angle',
+      type: 'tool',
+      text: 'Angle',
+      iconClasses: 'fa fa-angle-left',
+      active: false,
+    },
+    {
+      command: 'Bidirectional',
+      type: 'tool',
+      text: 'Bidirectional',
+      svgUrl: `${relativePathToIcons}#icon-tools-measure-target`,
+      active: false,
+    },
+    {
+      command: 'Brush',
+      type: 'tool',
+      text: 'Brush',
+      iconClasses: 'fa fa-circle',
+      active: false,
+    },
+    {
+      command: 'FreehandMouse',
+      type: 'tool',
+      text: 'Freehand',
+      iconClasses: 'fa fa-star',
+      active: false,
+    },
+    {
+      command: 'reset',
+      type: 'command',
+      text: 'Reset',
+      svgUrl: `${relativePathToIcons}#icon-tools-reset`,
+      active: false,
+    },
+  ]
+}

src/utils/index.js

@@ -1,4 +1,9 @@
+import getDefaultToolbarButtons from './getDefaultToolbarButtons.js'
 import getUserManagerForOpenIdConnectClient from './getUserManagerForOpenIdConnectClient.js'
 import initWebWorkers from './initWebWorkers.js'
 
-export { getUserManagerForOpenIdConnectClient, initWebWorkers }
+export {
+  getDefaultToolbarButtons,
+  getUserManagerForOpenIdConnectClient,
+  initWebWorkers,
+}

src/utils/index.test.js

@@ -5,7 +5,11 @@ describe('utils', () => {
     const utilExports = Object.keys(utils).sort()
 
     expect(utilExports).toEqual(
-      ['getUserManagerForOpenIdConnectClient', 'initWebWorkers'].sort()
+      [
+        'getDefaultToolbarButtons',
+        'getUserManagerForOpenIdConnectClient',
+        'initWebWorkers',
+      ].sort()
     )
   })
 })