From d3b54d8ab4b7cd463ad6243a92bd139971ed78f3 Mon Sep 17 00:00:00 2001
From: Tatiana <tatiana.matiukhova@gmail.com>
Date: Tue, 17 Sep 2024 19:33:28 -0700
Subject: [PATCH 1/3] Disable custom data charts when user is not logged in

---
 .../addChartButton/AddChartButton.tsx         | 251 ++++++++++--------
 1 file changed, 139 insertions(+), 112 deletions(-)

diff --git a/src/pages/studyView/addChartButton/AddChartButton.tsx b/src/pages/studyView/addChartButton/AddChartButton.tsx
index 8246b346ba2..a31902a0bef 100644
--- a/src/pages/studyView/addChartButton/AddChartButton.tsx
+++ b/src/pages/studyView/addChartButton/AddChartButton.tsx
@@ -50,6 +50,7 @@ import { CustomChartData } from 'shared/api/session-service/sessionServiceModels
 import ReactSelect from 'react-select';
 import { GenericAssayMeta } from 'cbioportal-ts-api-client';
 import { DataTypeConstants } from 'shared/constants';
+import { Else, If, Then } from 'react-if';
 
 export interface IAddChartTabsProps {
     store: StudyViewPageStore;
@@ -629,6 +630,23 @@ class AddChartTabs extends React.Component<IAddChartTabsProps, {}> {
 
     @computed get notificationMessages() {
         let notificationMessages: JSX.Element[] = [];
+        if (!this.props.store.isLoggedIn) {
+            notificationMessages.push(
+                <>
+                    <button
+                        className="btn btn-default btn-xs"
+                        onClick={() =>
+                            openSocialAuthWindow(this.props.store.appStore)
+                        }
+                    >
+                        Login
+                    </button>
+                    &nbsp;to add custom data charts to your profile.
+                </>
+            );
+            return notificationMessages;
+        }
+
         if (this.props.store.customChartSet.size > 0) {
             // Notify if there any shared custom data
             if (this.existSharedCustomData) {
@@ -644,28 +662,6 @@ class AddChartTabs extends React.Component<IAddChartTabsProps, {}> {
                         are shared custom data.
                     </>
                 );
-            }
-            // Notify that shared and page-session custom data are not saved for non-logged users
-            if (
-                !this.props.store.isLoggedIn &&
-                this.props.store.appStore.isSocialAuthenticated
-            ) {
-                if (notificationMessages.length > 0) {
-                    notificationMessages.push(<br />);
-                }
-                notificationMessages.push(
-                    <>
-                        <button
-                            className="btn btn-default btn-xs"
-                            onClick={() =>
-                                openSocialAuthWindow(this.props.store.appStore)
-                            }
-                        >
-                            Login
-                        </button>
-                        &nbsp;to save custom data charts to your profile.
-                    </>
-                );
             } else if (this.existSharedCustomData) {
                 // Notify if shared custom data are saved to user profile
                 if (notificationMessages.length > 0) {
@@ -911,104 +907,135 @@ class AddChartTabs extends React.Component<IAddChartTabsProps, {}> {
                                     this.getTabsWidth - CONTAINER_PADDING_WIDTH,
                             }}
                         >
-                            {this.customChartDataOptions.length > 0 && (
-                                <button
-                                    className="btn btn-primary btn-xs"
-                                    onClick={this.onToggleAddNewChart}
-                                >
-                                    {this.isAddNewChartWindowVisible
-                                        ? 'Cancel'
-                                        : '+ Add new custom data'}
-                                </button>
-                            )}
-
-                            {this.isAddNewChartWindowVisible && (
-                                <CustomCaseSelection
-                                    allSamples={this.props.store.samples.result}
-                                    selectedSamples={
-                                        this.props.store.selectedSamples.result
-                                    }
-                                    submitButtonText={'Add Chart'}
-                                    queriedStudies={
-                                        this.props.store.queriedPhysicalStudyIds
-                                            .result
-                                    }
-                                    isChartNameValid={
-                                        this.props.store.isChartNameValid
-                                    }
-                                    getDefaultChartName={
-                                        this.props.store
-                                            .getDefaultCustomChartName
-                                    }
-                                    disableSubmitButton={this.savingCustomData}
-                                    onSubmit={(chart: CustomChartData) => {
-                                        this.showAddNewChart = false;
-                                        this.savingCustomData = true;
-                                        this.updateInfoMessage(
-                                            `Saving ${chart.displayName}`
-                                        );
-                                        this.props.store
-                                            .addCustomChart(chart)
-                                            .then(() => {
-                                                this.savingCustomData = false;
-                                                this.updateInfoMessage(
-                                                    `${chart.displayName} has been added.`
-                                                );
-                                            });
-                                    }}
-                                />
+                            {!this.props.store.isLoggedIn && (
+                                <>
+                                    <br />
+                                    <span className="text-warning">
+                                        Please {this.notificationMessages}
+                                    </span>
+                                </>
                             )}
-
-                            <>
-                                {this.customChartDataOptions.length > 0 && (
-                                    <>
-                                        <hr
-                                            style={{
-                                                marginTop: 10,
-                                                marginBottom: 10,
-                                            }}
-                                        />
-                                        <AddChartByType
-                                            width={this.getTabsWidth}
-                                            options={
-                                                this.customChartDataOptions
+                            {this.props.store.isLoggedIn && (
+                                <div>
+                                    {this.customChartDataOptions.length > 0 && (
+                                        <button
+                                            className="btn btn-primary btn-xs"
+                                            onClick={this.onToggleAddNewChart}
+                                        >
+                                            {this.isAddNewChartWindowVisible
+                                                ? 'Cancel'
+                                                : '+ Add new custom data'}
+                                        </button>
+                                    )}
+
+                                    {this.isAddNewChartWindowVisible && (
+                                        <CustomCaseSelection
+                                            allSamples={
+                                                this.props.store.samples.result
                                             }
-                                            freqPromise={this.dataCount}
-                                            onAddAll={this.onAddAll}
-                                            onClearAll={this.onClearAll}
-                                            onToggleOption={this.onToggleOption}
-                                            hideControls={true}
-                                            firstColumnHeaderName="Custom data"
-                                            shareCharts={
-                                                this.props
-                                                    .openShareCustomDataUrlModal
+                                            selectedSamples={
+                                                this.props.store.selectedSamples
+                                                    .result
                                             }
-                                            deleteChart={(id: string) => {
-                                                this.props.store.toggleCustomChartMarkedForDeletion(
-                                                    id
-                                                );
-                                            }}
-                                            restoreChart={(id: string) => {
-                                                this.props.store.toggleCustomChartMarkedForDeletion(
-                                                    id
-                                                );
-                                            }}
-                                            markedForDeletion={
+                                            submitButtonText={'Add Chart'}
+                                            queriedStudies={
                                                 this.props.store
-                                                    .customChartGroupMarkedForDeletion
+                                                    .queriedPhysicalStudyIds
+                                                    .result
                                             }
+                                            isChartNameValid={
+                                                this.props.store
+                                                    .isChartNameValid
+                                            }
+                                            getDefaultChartName={
+                                                this.props.store
+                                                    .getDefaultCustomChartName
+                                            }
+                                            disableSubmitButton={
+                                                this.savingCustomData
+                                            }
+                                            onSubmit={(
+                                                chart: CustomChartData
+                                            ) => {
+                                                this.showAddNewChart = false;
+                                                this.savingCustomData = true;
+                                                this.updateInfoMessage(
+                                                    `Saving ${chart.displayName}`
+                                                );
+                                                this.props.store
+                                                    .addCustomChart(chart)
+                                                    .then(() => {
+                                                        this.savingCustomData = false;
+                                                        this.updateInfoMessage(
+                                                            `${chart.displayName} has been added.`
+                                                        );
+                                                    });
+                                            }}
                                         />
-                                    </>
-                                )}
-                                {this.notificationMessages.length > 0 && (
+                                    )}
+
                                     <>
-                                        <br />
-                                        <span className="text-warning">
-                                            Note: {this.notificationMessages}
-                                        </span>
+                                        {this.customChartDataOptions.length >
+                                            0 && (
+                                            <>
+                                                <hr
+                                                    style={{
+                                                        marginTop: 10,
+                                                        marginBottom: 10,
+                                                    }}
+                                                />
+                                                <AddChartByType
+                                                    width={this.getTabsWidth}
+                                                    options={
+                                                        this
+                                                            .customChartDataOptions
+                                                    }
+                                                    freqPromise={this.dataCount}
+                                                    onAddAll={this.onAddAll}
+                                                    onClearAll={this.onClearAll}
+                                                    onToggleOption={
+                                                        this.onToggleOption
+                                                    }
+                                                    hideControls={true}
+                                                    firstColumnHeaderName="Custom data"
+                                                    shareCharts={
+                                                        this.props
+                                                            .openShareCustomDataUrlModal
+                                                    }
+                                                    deleteChart={(
+                                                        id: string
+                                                    ) => {
+                                                        this.props.store.toggleCustomChartMarkedForDeletion(
+                                                            id
+                                                        );
+                                                    }}
+                                                    restoreChart={(
+                                                        id: string
+                                                    ) => {
+                                                        this.props.store.toggleCustomChartMarkedForDeletion(
+                                                            id
+                                                        );
+                                                    }}
+                                                    markedForDeletion={
+                                                        this.props.store
+                                                            .customChartGroupMarkedForDeletion
+                                                    }
+                                                />
+                                            </>
+                                        )}
+                                        {this.notificationMessages.length >
+                                            0 && (
+                                            <>
+                                                <br />
+                                                <span className="text-warning">
+                                                    Note:{' '}
+                                                    {this.notificationMessages}
+                                                </span>
+                                            </>
+                                        )}
                                     </>
-                                )}
-                            </>
+                                </div>
+                            )}
                         </div>
                     </MSKTab>
                     <MSKTab

From 21dd960ed6ed63b3d94a7a28fdfc83c94077fb1b Mon Sep 17 00:00:00 2001
From: alisman <lisman.aaron@gmail.com>
Date: Fri, 20 Sep 2024 14:56:25 -0400
Subject: [PATCH 2/3] update screens

---
 src/pages/studyView/addChartButton/AddChartButton.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/studyView/addChartButton/AddChartButton.tsx b/src/pages/studyView/addChartButton/AddChartButton.tsx
index a31902a0bef..2350c1f8912 100644
--- a/src/pages/studyView/addChartButton/AddChartButton.tsx
+++ b/src/pages/studyView/addChartButton/AddChartButton.tsx
@@ -19,7 +19,11 @@ import { StudyViewPageTabKeyEnum } from 'pages/studyView/StudyViewPageTabs';
 import autobind from 'autobind-decorator';
 import _ from 'lodash';
 import AddChartByType from './addChartByType/AddChartByType';
-import { DefaultTooltip, remoteData } from 'cbioportal-frontend-commons';
+import {
+    DefaultTooltip,
+    isWebdriver,
+    remoteData,
+} from 'cbioportal-frontend-commons';
 import CustomCaseSelection from './customCaseSelection/CustomCaseSelection';
 import {
     calculateClinicalDataCountFrequency,
@@ -915,7 +919,9 @@ class AddChartTabs extends React.Component<IAddChartTabsProps, {}> {
                                     </span>
                                 </>
                             )}
-                            {this.props.store.isLoggedIn && (
+                            // we want to show in e2e context even if user is //
+                            logged out
+                            {(this.props.store.isLoggedIn || isWebdriver()) && (
                                 <div>
                                     {this.customChartDataOptions.length > 0 && (
                                         <button

From c6adf1f0c9d866daf3ee91ee63400bfd735e5df4 Mon Sep 17 00:00:00 2001
From: alisman <lisman.aaron@gmail.com>
Date: Fri, 20 Sep 2024 15:00:38 -0400
Subject: [PATCH 3/3] update screens

---
 src/pages/studyView/addChartButton/AddChartButton.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/studyView/addChartButton/AddChartButton.tsx b/src/pages/studyView/addChartButton/AddChartButton.tsx
index 2350c1f8912..0955e19b9fd 100644
--- a/src/pages/studyView/addChartButton/AddChartButton.tsx
+++ b/src/pages/studyView/addChartButton/AddChartButton.tsx
@@ -919,8 +919,6 @@ class AddChartTabs extends React.Component<IAddChartTabsProps, {}> {
                                     </span>
                                 </>
                             )}
-                            // we want to show in e2e context even if user is //
-                            logged out
                             {(this.props.store.isLoggedIn || isWebdriver()) && (
                                 <div>
                                     {this.customChartDataOptions.length > 0 && (