DEVSU-2267 - Rework 'Beta' Print View

app/commonComponents.d.ts

@@ -1,7 +1,7 @@
 type SummaryProps = {
   templateName: string;
   isPrint: boolean;
-  printVersion?: 'stable' | 'beta' | null;
+  printVersion?: 'standardLayout' | 'condensedLayout' | null;
   loadedDispatch?: (type: Record<'type', string>) => void;
   visibleSections: string[] | null;
   [x: string]: unknown;

app/components/ReportSidebar/index.jsx

@@ -33,6 +33,48 @@ const ReportSidebar = (props) => {
     return null;
   }
 
+  const standardPrintOption = () => (
+    <MenuItem>
+      <Link
+        to={{ pathname: `/print/${report.ident}` }}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="report-sidebar__list-link"
+      >
+        <Typography>Standard Layout</Typography>
+      </Link>
+    </MenuItem>
+  );
+
+  const condensedPrintOption = () => (
+    <MenuItem>
+      <Link
+        to={{ pathname: `/condensedLayoutPrint/${report.ident}` }}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="report-sidebar__list-link"
+      >
+        <Typography>Condensed Layout</Typography>
+      </Link>
+    </MenuItem>
+  );
+
+  const printOptions = () => {
+    if (report.template.name === 'genomic') {
+      return (
+        <>
+          {standardPrintOption()}
+          {condensedPrintOption()}
+        </>
+      );
+    }
+    return (
+      <>
+        {standardPrintOption()}
+      </>
+    );
+  };
+
   return (
     <div className="report-sidebar">
       <List dense classes={{ root: 'report-sidebar__list' }}>
@@ -49,26 +91,7 @@ const ReportSidebar = (props) => {
             open={Boolean(anchorEl)}
             onClose={handlePrintMenuClose}
           >
-            <MenuItem>
-              <Link
-                to={{ pathname: `/print/${report.ident}` }}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="report-sidebar__list-link"
-              >
-                <Typography>Stable</Typography>
-              </Link>
-            </MenuItem>
-            <MenuItem>
-              <Link
-                to={{ pathname: `/printBeta/${report.ident}` }}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="report-sidebar__list-link"
-              >
-                <Typography>Beta</Typography>
-              </Link>
-            </MenuItem>
+            {printOptions()}
           </Menu>
         </ListItem>
         {allSections.map((section) => (

app/views/MainView/index.tsx

@@ -31,7 +31,7 @@ const TermsView = lazy(() => import('../TermsView'));
 const ReportsView = lazy(() => import('../ReportsView'));
 const ReportView = lazy(() => import('../ReportView'));
 const PrintView = lazy(() => import('../PrintView'));
-const BetaPrintView = (props) => <PrintView {...props} printVersion="beta" />;
+const CondensedPrintView = (props) => <PrintView {...props} printVersion="condensedLayout" />;
 const GermlineView = lazy(() => import('../GermlineView'));
 const AdminView = lazy(() => import('../AdminView'));
 const LinkOutView = lazy(() => import('../LinkOutView'));
@@ -184,7 +184,7 @@ const Main = (): JSX.Element => {
                   <Redirect exact from="/report/:ident/(genomic|probe)/summary" to="/report/:ident/summary" />
                   <AuthenticatedRoute component={ReportView} path="/report/:ident" />
                   <AuthenticatedRoute component={PrintView} path="/print/:ident" showNav={false} onToggleNav={setIsNavVisible} />
-                  <AuthenticatedRoute component={BetaPrintView} path="/printBeta/:ident" showNav={false} onToggleNav={setIsNavVisible} />
+                  <AuthenticatedRoute component={CondensedPrintView} path="/condensedLayoutPrint/:ident" showNav={false} onToggleNav={setIsNavVisible} />
                   <AuthenticatedRoute component={GermlineView} path="/germline" />
                   <AuthenticatedRoute component={ProjectsView} path="/projects" />
                   <AuthenticatedRoute adminRequired component={AdminView} path="/admin" />

app/views/PrintView/index.scss

@@ -31,7 +31,7 @@
   }
 }
 
-.printbeta {
+.condensedLayout {
   &__logo {
     max-width: 250px;
   }

app/views/PrintView/index.tsx

@@ -73,7 +73,7 @@ const PrintTitleBar = ({
   subtitle,
   subtitleSuffix,
   headerImageURI,
-  printVersion = 'stable',
+  printVersion = 'standardLayout',
 }: PrintTitleBarProps) => {
   if (!report) { return null; }
 
@@ -85,15 +85,15 @@ const PrintTitleBar = ({
     biopsyText = biopsyText.concat(`(${report.patientInformation.tumourSample})`);
   }
 
-  if (printVersion === 'beta') {
+  if (printVersion === 'condensedLayout') {
     return (
-      <div className="printbeta__headers">
-        <div className="printbeta__header-left">
+      <div className="condensedLayout__headers">
+        <div className="condensedLayout__header-left">
           {headerImageURI && (
-            <img className="printbeta__logo" src={headerImageURI} alt="" />
+            <img className="condensedLayout__logo" src={headerImageURI} alt="" />
           )}
         </div>
-        <div className="printbeta__header-right">
+        <div className="condensedLayout__header-right">
           <Typography variant="h2">{`${title ? `${title} Report: ` : ''} ${subtitle}${subtitleSuffix ? ` - ${subtitleSuffix}` : ''}`}</Typography>
           <Typography variant="body2">{biopsyText}</Typography>
         </div>
@@ -126,7 +126,7 @@ type PrintPropTypes = {
 };
 
 const Print = ({
-  printVersion = 'stable',
+  printVersion = 'standardLayout',
 }: PrintPropTypes): JSX.Element => {
   const params = useParams<{
     ident: string;
@@ -250,7 +250,7 @@ const Print = ({
 
   return (
     <ReportContext.Provider value={reportContextValue}>
-      <div className={`${printVersion === 'beta' ? 'printbeta' : 'print'}`}>
+      <div className={`${printVersion === 'condensedLayout' ? 'condensedLayout' : 'print'}`}>
         {report ? (
           <>
             <RunningLeft className="running-left" />

app/views/ReportView/components/GenomicSummary/components/KeyAlterations/index.scss

@@ -1,6 +1,6 @@
 // Shared styling between both versions
 .key-alterations, .key-alterations-print {
-  &__stable {
+  &__standardLayout {
     margin: 0 0 32px 0;
   }
 }
@@ -14,7 +14,7 @@
   margin: 0 auto;
   padding: 0 20px;
 
-  &__stable {
+  &__standardLayout {
 
     &-title {
       margin: 0 0 8px;
@@ -25,7 +25,7 @@
     }
   }
 
-  &__beta {
+  &__condensedLayout {
 
     &-content {
       margin-top: 8px;

app/views/ReportView/components/GenomicSummary/components/KeyAlterations/index.tsx

@@ -57,7 +57,7 @@ const customTypeSort = (variant) => {
 
   type KeyAlterationsProps = {
     isPrint: boolean;
-    printVersion?: 'stable' | 'beta' | null;
+    printVersion?: 'standardLayout' | 'condensedLayout' | null;
   } & WithLoadingInjectedProps;
 
 const KeyAlterations = ({
@@ -162,14 +162,14 @@ const KeyAlterations = ({
 
   const alterationsSection = useMemo(() => {
     let titleSection = (
-      <div className={`${classNamePrefix}__stable-title`}>
+      <div className={`${classNamePrefix}__standardLayout-title`}>
         <Typography variant="h3">
           Key Genomic and Transcriptomic Alterations Identified
         </Typography>
       </div>
     );
     let dataSection = (
-      <div className={`${classNamePrefix}__stable-content`}>
+      <div className={`${classNamePrefix}__standardLayout-content`}>
         <VariantCounts
           filter={variantFilter}
           counts={variantCounts}
@@ -185,7 +185,7 @@ const KeyAlterations = ({
       </div>
     );
 
-    if (printVersion === 'beta') {
+    if (printVersion === 'condensedLayout') {
       titleSection = (
         <Typography variant="h5" fontWeight="bold" display="inline">Key Genomic and Transcriptomic Alterations Identified</Typography>
       );
@@ -199,7 +199,7 @@ const KeyAlterations = ({
           });
         });
         dataSection = (
-          <div className={`${classNamePrefix}__beta-content`}>
+          <div className={`${classNamePrefix}__condensedLayout-content`}>
             <SummaryPrintTable
               data={categorizedDataArray}
               labelKey="key"

app/views/ReportView/components/GenomicSummary/index.tsx

@@ -36,7 +36,7 @@ import './index.scss';
 type GenomicSummaryProps = {
   loadedDispatch?: ({ type }: { type: string }) => void;
   isPrint: boolean;
-  printVersion?: 'stable' | 'beta' | null;
+  printVersion?: 'standardLayout' | 'condensedLayout' | null;
 } & WithLoadingInjectedProps;
 
 const GenomicSummary = ({
@@ -438,7 +438,7 @@ const GenomicSummary = ({
       </div>
     );
 
-    if (printVersion === 'beta') {
+    if (printVersion === 'condensedLayout') {
       titleSection = (
         <div className={`${classNamePrefix}__patient-information-title`}>
           <Typography variant="h5" fontWeight="bold" display="inline">
@@ -503,7 +503,7 @@ const GenomicSummary = ({
       </div>
     );
 
-    if (printVersion === 'beta') {
+    if (printVersion === 'condensedLayout') {
       titleSection = (
         <div className={`${classNamePrefix}__tumour-summary-title`}>
           <Typography variant="h5" fontWeight="bold" display="inline">Tumour Summary</Typography>
@@ -530,7 +530,7 @@ const GenomicSummary = ({
     return null;
   }
 
-  if (printVersion === 'beta') {
+  if (printVersion === 'condensedLayout') {
     return (
       <div className={classNamePrefix}>
         <DemoDescription>

app/views/ReportView/components/TherapeuticTargets/index.tsx

@@ -49,7 +49,7 @@ const filterType = (
 
 type TherapeuticProps = {
   isPrint?: boolean;
-  printVersion?: 'stable' | 'beta' | null;
+  printVersion?: 'standardLayout' | 'condensedLayout' | null;
 } & WithLoadingInjectedProps;
 
 const Therapeutic = ({
@@ -205,7 +205,7 @@ const Therapeutic = ({
     }
   }, [chemoresistanceData, therapeuticData, report]);
 
-  if (isPrint && printVersion === 'stable') {
+  if (isPrint && printVersion === 'standardLayout') {
     return (
       <div className="therapeutic-print">
         <Typography
@@ -234,7 +234,7 @@ const Therapeutic = ({
     );
   }
 
-  if (isPrint && printVersion === 'beta') {
+  if (isPrint && printVersion === 'condensedLayout') {
     return (
       <div className="therapeutic-print">
         <Typography