fix(misc): Update the data source name, provide a /datasources example customization for debug (#3036)

* fix(misc):Update the data source name, provide  a /datasources

Update the imports for a few things to match, to avoid 2 versions

Fix the datasources name

pr:Make the data source selector configurable

* Updated data source selector page as requested

* PR fixes

extensions/default/src/Panels/DataSourceSelector.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useNavigate } from 'react-router-dom';
+import { useAppConfig } from '@state';
+
+import { Button } from '@ohif/ui';
+
+function DataSourceSelector() {
+  const [appConfig] = useAppConfig();
+  const navigate = useNavigate();
+
+  // This is frowned upon, but the raw config is needed here to provide
+  // the selector
+  const dsConfigs = appConfig.dataSources;
+
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <div className="h-screen w-screen flex justify-center items-center ">
+        <div className="py-8 px-8 mx-auto bg-secondary-dark drop-shadow-md space-y-2 rounded-lg">
+          <img
+            className="block mx-auto h-14"
+            src="./ohif-logo.svg"
+            alt="OHIF"
+          />
+          <div className="text-center space-y-2 pt-4">
+            {dsConfigs
+              .filter(
+                it =>
+                  it.sourceName !== 'dicomjson' &&
+                  it.sourceName !== 'dicomlocal'
+              )
+              .map(ds => (
+                <div key={ds.sourceName}>
+                  <h1 className="text-white">{ds.friendlyName}</h1>
+                  <Button
+                    className={classnames('font-bold', 'ml-2')}
+                    onClick={() => {
+                      navigate({
+                        pathname: '/',
+                        search: `datasources=${ds.sourceName}`,
+                      });
+                    }}
+                  >
+                    {ds.sourceName}
+                  </Button>
+                  <br />
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DataSourceSelector;

extensions/default/src/ViewerLayout/index.tsx

@@ -44,7 +44,7 @@ function ViewerLayout({
     const search =
       dataSourceIdx === -1
         ? undefined
-        : `datasourcename=${pathname.substring(dataSourceIdx + 1)}`;
+        : `datasources=${pathname.substring(dataSourceIdx + 1)}`;
     navigate({
       pathname: '/',
       search,

extensions/default/src/getCustomizationModule.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import DataSourceSelector from './Panels/DataSourceSelector';
 
 /**
  *
@@ -25,5 +26,19 @@ export default function getCustomizationModule() {
         ],
       },
     },
+
+    // Example customization to list a set of datasources
+    {
+      name: 'datasources',
+      value: {
+        id: 'customRoutes',
+        routes: [
+          {
+            path: '/datasources',
+            children: DataSourceSelector,
+          },
+        ],
+      },
+    },
   ];
 }