chore: Apply requested changes

.env

@@ -1,3 +1,2 @@
 REACT_APP_USE_MOCK_API=false
-REACT_APP_ENABLE_PERMISSIONS=true
-REACT_APP_ORTHANC_EXPLORER=https://orthanc.uni2growcameroun.com/app/explorer.html
+REACT_APP_ENABLE_PERMISSIONS=true

.env.development

@@ -1,3 +1,2 @@
 REACT_APP_USE_MOCK_API=true
-REACT_APP_ENABLE_PERMISSIONS=false
-REACT_APP_ORTHANC_EXPLORER=https://orthanc.uni2growcameroun.com/app/explorer.html
+REACT_APP_ENABLE_PERMISSIONS=false

src/components/accessories/radiology/hooks/index.ts

@@ -1 +1 @@
-export * from "./useViewMore";
+export * from "./useViewInOrthanc";

src/components/accessories/radiology/hooks/useViewInOrthanc.ts

@@ -0,0 +1,17 @@
+import { useCallback } from "react";
+
+export const useViewInOrthanc = (level: "study" | "series" | "instance") => {
+  /**
+   * Todo: Use value provided by the backend
+   */
+  const ORTHANC_EXPLORER =
+    "https://orthanc.uni2growcameroun.com/app/explorer.html";
+  const handleViewInOrthanc = useCallback(
+    (row: any) => () => {
+      window.open(`${ORTHANC_EXPLORER}#${level}?uuid=${row.id}`, "_blank");
+    },
+    [level]
+  );
+
+  return handleViewInOrthanc;
+};

src/components/accessories/radiology/series/Series.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeft, Visibility } from "@mui/icons-material";
+import { ChevronLeft, OpenInNew } from "@mui/icons-material";
 import {
   Backdrop,
   Button,
@@ -23,7 +23,7 @@ import {
   getStudySeriesWithInstances,
   getStudySeriesWithInstancesReset,
 } from "state/radiology";
-import { useViewMore } from "../hooks";
+import { useViewInOrthanc } from "../hooks";
 import { Instances } from "./instances/Instances";
 import { Preview } from "./preview/Preview";
 import "./styles.scss";
@@ -138,7 +138,7 @@ export const Series = () => {
     }
   }, [previewState.status, setOpenPreview]);
 
-  const handleViewSeries = useViewMore("series");
+  const handleViewSeries = useViewInOrthanc("series");
 
   return (
     <div className="series">
@@ -171,7 +171,7 @@ export const Series = () => {
                   <ChevronLeft /> {t("radiology.series.backToStudies")}
                 </Button>
                 {study?.title && (
-                  <p className="series__StudyTitle">
+                  <p className="series__studyTitle">
                     {study.title} {study.date && " | " + study.date}
                   </p>
                 )}
@@ -193,9 +193,9 @@ export const Series = () => {
                   isCollapsabile={true}
                   renderCustomActions={(row) => (
                     <div className="series__actions">
-                      <Tooltip title={t("radiology.series.viewMore")}>
+                      <Tooltip title={t("radiology.series.viewInOrthanc")}>
                         <IconButton onClick={handleViewSeries(row)}>
-                          <Visibility />
+                          <OpenInNew />
                         </IconButton>
                       </Tooltip>
                     </div>

src/resources/i18n/en.json

@@ -22,13 +22,13 @@
       "status": "Status",
       "lastUpdate": "Last Update",
       "backToStudies": "Back to studies",
-      "viewMore": "View More"
+      "viewInOrthanc": "View in ORTHANC Explorer"
     },
     "instances": {
       "date": "Creation Date",
       "title": "Instance {number}",
       "time": "Creation Time",
-      "preview": "Preview"
+      "preview": "Instance Preview"
     }
   },
   "errors": {