Merge pull request #17 from uwcirg/feature/leaf-ui-updates-022325

Update Attestation content, add logout button

src/ui-client/src/components/Attestation/AttestationFooter.tsx

@@ -41,22 +41,8 @@ export default class AttestationFooter extends React.PureComponent<Props,State>
         return createPortal(
             <div className={c}>
                 <div className={`${c}-text`}>
-                    <strong>Planning to publish your results?</strong>
-                    <span>Great! Please cite this manuscript to ensure we can continue making Leaf even better:</span>
-                </div>
-                <div className={`${c}-manuscript`}>
-                    <a href='https://academic.oup.com/jamia/article/27/1/109/5583724' target='_'>
-                        <span className={`${c}-manuscript-authors`}>
-                            Nicholas J Dobbins, Clifford H Spital, Robert A Black, Jason M Morrison, Bas de Veer, Elizabeth Zampino, Robert D Harrington, 
-                            Bethene D Britt, Kari A Stephens, Adam B Wilcox, Peter Tarczy-Hornoch, Sean D Mooney.
-                        </span>
-                        <span className={`${c}-manuscript-title`}>
-                            Leaf: an open-source, model-agnostic, data-driven web application for cohort discovery and translational biomedical research.
-                        </span>
-                        <span className={`${c}-manuscript-publisher`}>
-                            Journal of the American Medical Informatics Association, ocz165, https://doi.org/10.1093/jamia/ocz165
-                        </span>
-                    </a>
+                    <img alt="leaf-logo" className="logo" src={process.env.PUBLIC_URL + '/images/logos/apps/leaf.svg'} />
+                    <strong>For more information about the Leaf data visualization tool, please click <a href="https://leafdocs.rit.uw.edu/" target="_blank">here</a>.</strong>
                 </div>
             </div>, 
             backdrop

src/ui-client/src/components/Attestation/CustomAttestationConfirmation.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import { Button, Row, Col } from 'reactstrap';
 import { SessionType } from '../../models/Session'
 import { AppConfig, CustomAttestationType } from '../../models/Auth';
-import TextareaAutosize from 'react-textarea-autosize';
 
 interface Props {
     config?: AppConfig;
@@ -33,25 +32,45 @@ export default class CustomAttestationConfirmation extends React.PureComponent<P
         const phiDisplay = isIdentified ? 'Identified' : 'Deidentified';
         const showText = config && config.attestation.enabled;
         const useHtml = config.attestation.type && config.attestation.type === CustomAttestationType.Html;
+        const skipModeSelection = config && config.attestation.skipModeSelection;
+        const nextButtonContainerColSize = skipModeSelection ? 12: 6;
+        const nextButtonContainerClass = skipModeSelection ? "" : "right";
+        const nextButtonText = skipModeSelection ? "Access the Data Exploration Tool" : "I Agree";
 
         return  (
             <div className={confirmationClass}>
+                  {!skipModeSelection && 
+                        <div  className={`${c}-confirmation-settings left`}>
+                            {useDisplay} - {phiDisplay}
+                        </div>}
+                 <div>
+                    {/* use custom text */}
+                    {useHtml &&
+                        <div className={`${c}-custom-html`} dangerouslySetInnerHTML={ {__html: config.attestation.text.join("")} }></div>
+                    }
+
+                    {!useHtml &&
+                        <div className={`${c}-custom-text-container`}>
+                            {config.attestation.text.map((t,i) => {
+                                return <p key={i} className={`${c}-custom-text`}>{t}</p>;
+                            })}
+                        </div>
+                    }
+                </div>
                 {showText &&
+                <div className={`${c}-confirmation-settings`} key='1'>
+                    <Row className={`${c}-confirmation-settings custom`} key='1'>
 
-                <div>
-                    <Row className={`${c}-confirmation-settings`} key='1'>
-                        <Col md={6} className="left">
-                            {useDisplay} - {phiDisplay}
-                        </Col>
                         {!(isSubmittingAttestation || hasAttested) &&
-                        <Col md={6} className="right">
+                        <Col md={12}>
                             <Button 
                                 onClick={handleIAgreeClick} 
                                 tabIndex={-1}
                                 className="leaf-button leaf-button-primary">
-                                I Agree
+                                {nextButtonText}
                             </Button>
-                            {config && !config.attestation.skipModeSelection &&
+                            {" "}
+                            {!skipModeSelection &&
                             <Button 
                                 onClick={handleGoBackClick} 
                                 tabIndex={-1}
@@ -62,31 +81,15 @@ export default class CustomAttestationConfirmation extends React.PureComponent<P
                         </Col>
                         }
                         {(isSubmittingAttestation || hasAttested) &&
-                        <Col md={6} className="right">
-                            <div className={`${c}-session-load-display-container`}>
+                        <Col md={12}>
+                            <div className={`${c}-session-load-display-container custom`}>
                                 <div className={`${c}-session-load-display`}>
                                     <span>...{sessionLoadDisplay}</span>
                                 </div>
                             </div>
                         </Col>
                         }
                     </Row>
-
-                    <div>
-
-                        {/* Else use custom text */}
-                        {useHtml &&
-                        <div className={`${c}-custom-html`} dangerouslySetInnerHTML={ {__html: config.attestation.text.join("")} }></div>
-                        }
-
-                        {!useHtml &&
-                        <div className={`${c}-custom-text-container`}>
-                            {config.attestation.text.map((t,i) => {
-                                return <TextareaAutosize key={i} className={`${c}-custom-text`} defaultValue={t} readOnly={true} />;
-                            })}
-                        </div>
-                        }
-                    </div>
                 </div>
                 }
             </div>

src/ui-client/src/components/Header/LogoutButton.tsx

@@ -0,0 +1,35 @@
+/* Copyright (c) 2022, UW Medicine Research IT, University of Washington
+ * Developed by Nic Dobbins and Cliff Spital, CRIO Sean Mooney
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */ 
+
+import React from 'react';
+import { NavItem } from 'reactstrap';
+import { FaDoorOpen } from 'react-icons/fa';
+import { AuthorizationState } from '../../models/state/AppState';
+
+interface Props {
+    auth?: AuthorizationState;
+    logoutClickHandler: () => any;
+}
+
+export default class UserButton extends React.PureComponent<Props> {
+    private className = 'header';
+
+    public render() {
+        const c = this.className;
+        const { auth, logoutClickHandler} = this.props;
+        const authLogoutEnabled = auth && auth.config && auth.config.authentication.logout.enabled;
+        if (!authLogoutEnabled) return null;
+        return (
+            <NavItem className={`${c}-myleaf ${c}-item-dropdown ${c}-item-hover-dark`}>
+                <div className={`${c}-myleaf-icon-container`} onClick={logoutClickHandler}>
+                    <FaDoorOpen className="header-options-icon header-myleaf-icon" />
+                    <span className="header-options-text">Log Out</span>
+                </div>
+            </NavItem>
+        );
+    }
+}

src/ui-client/src/components/Header/UserButton.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { NavItem } from 'reactstrap';
 import { FiUser, FiUserCheck, FiShield, FiGlobe, FiAlertOctagon, FiUsers, FiHelpCircle } from 'react-icons/fi';
-import { FaChevronDown, FaStar, FaDoorOpen } from 'react-icons/fa';
+import { FaChevronDown, FaStar } from 'react-icons/fa';
 import { UserContext } from '../../models/Auth';
 import ImportState from '../../models/state/Import';
 import { MyLeafTabType } from '../../models/state/GeneralUiState';
@@ -122,12 +122,6 @@ export default class UserButton extends React.PureComponent<Props> {
 
                         <div className={`${c}-option-divider`} />
 
-                        {auth && auth.config && auth.config.authentication.logout.enabled && 
-                        <div className={`${c}-option ${c}-option-logout`} onClick={logoutClickHandler}>
-                            <FaDoorOpen className="myleaf-menu-icon myleaf-menu-icon-logout" />
-                            <span>Log Out</span>
-                        </div>
-                        }
                     </div>
                 </div>
             </NavItem>