118 version home button show version number configured urls add button that redirects to the portal to change the upload slot

src/uploader/DicomParsingMenu.js

@@ -185,6 +185,7 @@ export default class DicomParsingMenu extends Component {
           updateDeIdentificationCheckConfiguration={this.props.updateDeIdentificationCheckConfiguration}
           language={this.props.language}
           resetAll={this.props.resetAll}
+          uploaderConfig={this.props.uploaderConfig}
         />
       </React.Fragment>
     );

src/uploader/SettingsDialog.js

@@ -25,7 +25,6 @@ import { Column } from "primereact/column";
 import { DataTable } from "primereact/datatable";
 import { Dialog } from "primereact/dialog";
 import { InputSwitch } from "primereact/inputswitch";
-import { Menu } from "primereact/menu";
 import { TabPanel, TabView } from "primereact/tabview";
 import styledComponents from "styled-components";
 import SanityCheckTypesUINames from "./../constants/sanityCheck/SanityCheckTypeUINames";
@@ -56,6 +55,26 @@ export default class SettingsDialog extends Component {
     return Array.from(configs);
   }
 
+  buildUploaderConfigurationRows() {
+    let configs = [];
+    for (let configKey of Object.keys(this.props.uploaderConfig)) {
+      const config = {};
+      config.name = configKey;
+      config.value = this.props.uploaderConfig[configKey];
+      configs.push({ ...config });
+    }
+    return Array.from(configs);
+  }
+
+  buildCommandsRows() {
+    let configs = [
+      {
+        name: "Reset to Defaults",
+      },
+    ];
+    return Array.from(configs);
+  }
+
   /**
    * Sets the parameter to false in the sanitycheck configuration and triggers the update of
    * the sanity check results for the uploader.
@@ -104,6 +123,26 @@ export default class SettingsDialog extends Component {
     );
   }
 
+  detailsActionTemplate(node, column) {
+    const StyledButton = styledComponents(Button)`{ width: 135px }`;
+    switch (node.name) {
+      case "Reset to Defaults":
+        return (
+          <StyledButton
+            type="button"
+            label="Reset"
+            className="p-button-sm"
+            icon="pi pi-refresh"
+            onClick={(e) => this.resetAll()}
+          ></StyledButton>
+        );
+        break;
+      default:
+        // no elememt
+        break;
+    }
+  }
+
   /**
    * Render header
    */
@@ -119,8 +158,6 @@ export default class SettingsDialog extends Component {
    * Render the component
    */
   render = () => {
-    const StyledButton = styledComponents(Button)`{ width: 135px }`;
-
     const sanityCheckConfigurationParameterTableHeader = (
       <div className="table-header">Sanity Check Configuration Parameter</div>
     );
@@ -129,16 +166,9 @@ export default class SettingsDialog extends Component {
       <div className="table-header">De-Identification Check Configuration Parameter</div>
     );
 
-    const factoryTabItems = [
-      {
-        label: "Reset",
-        icon: "pi pi-refresh",
-        iconPos: "right",
-        command: () => {
-          this.resetAll();
-        },
-      },
-    ];
+    const uploaderConfigurationTableHeader = <div className="table-header">Uploader Configuration</div>;
+
+    const uploaderConfigurationCommandsTableHeader = <div className="table-header">Commands</div>;
 
     const StyledDataTablediv = styledComponents.div`.p-datatable .p-datatable-tbody tr td {padding: 5px 5px; }`;
 
@@ -186,15 +216,28 @@ export default class SettingsDialog extends Component {
               </DataTable>
             </StyledDataTablediv>
           </TabPanel>
-          <TabPanel header="Factory">
-            <Menu model={factoryTabItems} />
-            {/* <StyledButton
-                            className={"pr-3 p-button-secondary"}
-                            label="Reset"
-                            icon="pi pi-refresh"
-                            iconPos="right"
-                            onClick={this.props.resetAll}
-                        /> */}
+          <TabPanel header="Configuration">
+            <StyledDataTablediv>
+              <DataTable
+                value={this.buildCommandsRows()}
+                showHeaders="false"
+                dataKey="name"
+                header={uploaderConfigurationCommandsTableHeader}
+              >
+                <Column field="name" className="text-sm" />
+                <Column className="text-sm" columnKey="name" body={this.detailsActionTemplate.bind(this)} />
+              </DataTable>
+            </StyledDataTablediv>
+            <StyledDataTablediv>
+              <DataTable
+                value={this.buildUploaderConfigurationRows()}
+                dataKey="name"
+                header={uploaderConfigurationTableHeader}
+              >
+                <Column field="name" header="Parameter" className="text-sm" sortable />
+                <Column field="value" header="Value" className="text-sm" sortable />
+              </DataTable>
+            </StyledDataTablediv>
           </TabPanel>
         </TabView>
       </Dialog>

src/uploader/SlotPanel.js

@@ -17,9 +17,12 @@
  *
  */
 
+import { Button } from "primereact/button";
+import { Card } from "primereact/card";
+import { Menubar } from "primereact/menubar";
 import React, { Component } from "react";
 import styledComponents from "styled-components";
-import { Card } from "primereact/card";
+import { Tooltip } from "primereact/tooltip";
 import { convertOCDateStringToLocaleString } from "../util/DateParser";
 
 /**
@@ -67,9 +70,25 @@ export class SlotPanel extends Component {
              min-width: 150px 
             }`;
 
+    const StyledButton = styledComponents(Button)`{ width: 135px }`;
+
+    const items = [
+      {
+        label: "Back to Portal",
+        icon: "pi pi-arrow-circle-left",
+        command: (e) => {
+          this.props.redirectToPortal();
+        },
+      },
+    ];
+
+    const start = <div className="flex align-items-center gap-2 text-2xl">DICOM Upload</div>;
+
+    const header = <Menubar model={items} />;
+
     return (
       <div>
-        <Card title="DICOM Upload Slot">
+        <Card header={header}>
           <div className="flex flex-wrap card-container text-sm">
             {this.props.studyIdentifier != null ? (
               <div className="flex mr-2">
@@ -84,6 +103,12 @@ export class SlotPanel extends Component {
                 <StyledDivValueComponent>{this.props.siteIdentifier}</StyledDivValueComponent>
               </div>
             ) : null}
+            {this.props.uploaderVersion != null ? (
+              <div className="flex mr-2">
+                <StyledDivNameComponent className="font-bold">Uploader:&nbsp;</StyledDivNameComponent>
+                <StyledDivValueComponent>{this.props.uploaderVersion}</StyledDivValueComponent>
+              </div>
+            ) : null}
           </div>
           <div className="flex flex-wrap card-container text-sm">
             {this.props.subjectId != null ? (

src/uploader/Uploader.js

@@ -702,6 +702,17 @@ class Uploader extends Component {
     this.dicomUploadPackage = new DicomUploadPackage(this.createUploadSlotParameterObject(), this.log, this.config);
     this.ignoredFilesArray = [];
     this.log.trace("Reset Uploader component", {}, {});
+    toast.success(
+      <div>
+        <div>{"Reset succeed."}</div>
+      </div>,
+      {
+        autoClose: true,
+        position: "top-center",
+        closeOnClick: true,
+        pauseOnHover: true,
+      }
+    );
   }
 
   hideUploadCheckResultsPanel() {
@@ -1172,6 +1183,8 @@ class Uploader extends Component {
             yob={this.props.yob}
             gender={this.props.gender}
             language={this.state.language}
+            uploaderVersion={this.props.config.uploaderVersion}
+            redirectToPortal={this.redirectToPortal}
           />
 
           <Divider />
@@ -1209,6 +1222,7 @@ class Uploader extends Component {
             submitUploadPackage={this.submitUploadPackage}
             getServerUploadParameter={this.getServerUploadParameter}
             uploadApiKey={this.state.uploadApiKey}
+            uploaderConfig={this.props.config}
           />
 
           <Divider />

test/jsdom/App.test.js

@@ -34,7 +34,7 @@ test("renders DICOM Upload Slot headline", () => {
       <App config={config} />
     </MemoryRouter>
   );
-  const linkElement = getByText(/DICOM Upload Slot/);
+  const linkElement = getByText(/Back to Portal/);
 
   fetch.disableMocks();