From 9c523495334553f758ff8307085df8bc4a3af7c2 Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Wed, 25 Sep 2024 16:17:44 -0500 Subject: [PATCH 01/12] interactive session modal context --- client/modules/_hooks/src/workspace/index.ts | 1 + .../workspace/useInteractiveModalContext.ts | 9 +++ .../AppsSubmissionDetails.tsx | 2 +- .../AppsSubmissionForm/AppsSubmissionForm.tsx | 46 +++++++++---- .../InteractiveSessionModal.tsx | 65 ++++++++++++++----- .../workspace/src/JobsListing/JobsListing.tsx | 6 +- .../workspace/layouts/WorkspaceBaseLayout.tsx | 10 ++- 7 files changed, 102 insertions(+), 37 deletions(-) create mode 100644 client/modules/_hooks/src/workspace/useInteractiveModalContext.ts diff --git a/client/modules/_hooks/src/workspace/index.ts b/client/modules/_hooks/src/workspace/index.ts index d9b8661bc..94e373286 100644 --- a/client/modules/_hooks/src/workspace/index.ts +++ b/client/modules/_hooks/src/workspace/index.ts @@ -18,3 +18,4 @@ export * from './useGetJobs'; export * from './usePostJobs'; export * from './types'; export * from './useGetAllocations'; +export * from './useInteractiveModalContext'; diff --git a/client/modules/_hooks/src/workspace/useInteractiveModalContext.ts b/client/modules/_hooks/src/workspace/useInteractiveModalContext.ts new file mode 100644 index 000000000..aeb998983 --- /dev/null +++ b/client/modules/_hooks/src/workspace/useInteractiveModalContext.ts @@ -0,0 +1,9 @@ +import React, { createContext, useContext } from 'react'; + +export const InteractiveModalContext = createContext< + [boolean, React.Dispatch>] | null +>(null); + +export const useInteractiveModalContext = () => { + return useContext(InteractiveModalContext); +}; diff --git a/client/modules/workspace/src/AppsSubmissionDetails/AppsSubmissionDetails.tsx b/client/modules/workspace/src/AppsSubmissionDetails/AppsSubmissionDetails.tsx index f0a423b16..b388c2cc3 100644 --- a/client/modules/workspace/src/AppsSubmissionDetails/AppsSubmissionDetails.tsx +++ b/client/modules/workspace/src/AppsSubmissionDetails/AppsSubmissionDetails.tsx @@ -261,7 +261,7 @@ export const AppsSubmissionDetails: React.FC<{ loading={isSubmitting} style={{ width: 120 }} > - Submit Job + {definition.notes.isInteractive ? 'Start Session' : 'Submit Job'} } /> diff --git a/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx b/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx index a78684f15..cfd97fef4 100644 --- a/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx +++ b/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx @@ -19,8 +19,10 @@ import { TJobBody, useGetAllocationsSuspense, TTapisJob, + useInteractiveModalContext, } from '@client/hooks'; import { AppsSubmissionDetails } from '../AppsSubmissionDetails/AppsSubmissionDetails'; +import { InteractiveSessionModal } from '../InteractiveSessionModal/InteractiveSessionModal'; import { AppsWizard } from '../AppsWizard/AppsWizard'; import { default as FormSchema, @@ -73,6 +75,12 @@ export const AppsSubmissionForm: React.FC = () => { data: TTapisJob; }; + const [showInteractiveModal, setShowInteractiveModal] = + useInteractiveModalContext() as [ + boolean, + React.Dispatch> + ]; + const { definition, license, defaultSystemNeedsKeys } = app; const defaultStorageHost = defaultStorageSystem.host; @@ -368,6 +376,9 @@ export const AppsSubmissionForm: React.FC = () => { setPushKeysSystem(submitResult.execSys); } else if (isSuccess) { reset(initialValues); + if (definition.notes.isInteractive) { + setShowInteractiveModal(true); + } } }, [submitResult]); @@ -516,20 +527,22 @@ export const AppsSubmissionForm: React.FC = () => { return ( <> - {submitResult && !submitResult.execSys && ( - - Job submitted successfully. Monitor its progress in{' '} - Job Status. - - } - type="success" - closable - showIcon - style={{ marginBottom: '1rem' }} - /> - )} + {submitResult && + !submitResult.execSys && + !definition.notes.isInteractive && ( + + Job submitted successfully. Monitor its progress in{' '} + Job Status. + + } + type="success" + closable + showIcon + style={{ marginBottom: '1rem' }} + /> + )} {missingAllocation && ( { setIsModalOpen={setPushKeysSystem} onSuccess={() => submitVariables && submitJob(submitVariables)} /> + setShowInteractiveModal(false)} + openedBySubmit + /> ); }; diff --git a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx index d184d61a5..8f6af0096 100644 --- a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx +++ b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx @@ -5,37 +5,70 @@ import styles from './InteractiveSessionModal.module.css'; export const InteractiveSessionModal: React.FC<{ isOpen: boolean; - interactiveSessionLink: string; + interactiveSessionLink?: string; message?: string; onCancel: VoidFunction; -}> = ({ isOpen, interactiveSessionLink, message, onCancel }) => { + openedBySubmit?: boolean; +}> = ({ + isOpen, + interactiveSessionLink, + message, + onCancel, + openedBySubmit, +}) => { return ( Open Session} width="500px" open={isOpen} footer={ - + Connect } onCancel={onCancel} >
- - Click the button below to connect to the interactive session. - + {interactiveSessionLink ? ( + + Click the button below to connect to the interactive session. + + ) : ( + <> + + Your session is loading. You can keep this modal open, and wait + here for an access button. + + {openedBySubmit && ( + + { + '(Or you can close this modal, and wait for a notification to access your job via Job Status.)' + } + + )} + + )} {message && {message}} - To end the job, quit the application within the session. - - Files may take some time to appear in the output location after the - job has ended. - - - For security purposes, this is the URL that the connect button will - open: - - {interactiveSessionLink} + {!!!interactiveSessionLink && ( + <> + + To end the job, quit the application within the session. + + + Files may take some time to appear in the output location after + the job has ended. + + + For security purposes, this is the URL that the connect button + will open: + + {interactiveSessionLink} + + )}
); diff --git a/client/modules/workspace/src/JobsListing/JobsListing.tsx b/client/modules/workspace/src/JobsListing/JobsListing.tsx index d2dcf3404..09435c73c 100644 --- a/client/modules/workspace/src/JobsListing/JobsListing.tsx +++ b/client/modules/workspace/src/JobsListing/JobsListing.tsx @@ -58,7 +58,7 @@ export const JobActionButton: React.FC<{ const InteractiveSessionButtons: React.FC<{ uuid: string; - interactiveSessionLink: string; + interactiveSessionLink?: string; message?: string; }> = ({ uuid, interactiveSessionLink, message }) => { const [interactiveModalState, setInteractiveModalState] = useState(false); @@ -142,13 +142,13 @@ export const JobsListing: React.FC> = ({ {truncateMiddle(job.name, 35)} - {!!interactiveSessionLink && ( + { - )} + } {!isInteractiveJob(job) && ( { usePrefetchGetAllocations(); const { data, isLoading } = useAppsListing(); + const [showInteractiveModal, setShowInteractiveModal] = useState(false); if (!data || isLoading) return ( @@ -41,7 +43,9 @@ const WorkspaceRoot: React.FC = () => { }; return ( - <> + { - + ); }; From 4516a1364741fff00befc6e03dfb17ef572ee901 Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Tue, 1 Oct 2024 13:39:38 -0500 Subject: [PATCH 02/12] use shared state --- .../InteractiveSessionModal.tsx | 2 +- .../workspace/src/JobsListing/JobsListing.tsx | 17 +++++++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx index 8f6af0096..5c30d7321 100644 --- a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx +++ b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx @@ -53,7 +53,7 @@ export const InteractiveSessionModal: React.FC<{ )} {message && {message}} - {!!!interactiveSessionLink && ( + {interactiveSessionLink && ( <> To end the job, quit the application within the session. diff --git a/client/modules/workspace/src/JobsListing/JobsListing.tsx b/client/modules/workspace/src/JobsListing/JobsListing.tsx index 09435c73c..15899cb17 100644 --- a/client/modules/workspace/src/JobsListing/JobsListing.tsx +++ b/client/modules/workspace/src/JobsListing/JobsListing.tsx @@ -12,6 +12,7 @@ import { TJobPostOperations, useReadNotifications, TGetNotificationsResponse, + useInteractiveModalContext, } from '@client/hooks'; import { JobsListingTable, @@ -61,13 +62,17 @@ const InteractiveSessionButtons: React.FC<{ interactiveSessionLink?: string; message?: string; }> = ({ uuid, interactiveSessionLink, message }) => { - const [interactiveModalState, setInteractiveModalState] = useState(false); + const [showInteractiveModal, setShowInteractiveModal] = + useInteractiveModalContext() as [ + boolean, + React.Dispatch> + ]; return ( <> setInteractiveModalState(true)} + onClick={() => setShowInteractiveModal(true)} > Open @@ -78,10 +83,10 @@ const InteractiveSessionButtons: React.FC<{ size="small" /> setInteractiveModalState(false)} + onCancel={() => setShowInteractiveModal(false)} /> ); @@ -142,13 +147,13 @@ export const JobsListing: React.FC> = ({ {truncateMiddle(job.name, 35)} - { + {!!interactiveSessionLink && ( - } + )} {!isInteractiveJob(job) && ( Date: Thu, 3 Oct 2024 16:15:09 -0500 Subject: [PATCH 03/12] use shared context for interactive session modal --- .../workspace/useInteractiveModalContext.ts | 17 ++++++++-- .../AppsSubmissionForm/AppsSubmissionForm.tsx | 16 +++------- .../InteractiveSessionModal.tsx | 32 ++++++++++--------- .../workspace/src/JobsListing/JobsListing.tsx | 23 ++++++------- client/modules/workspace/src/index.ts | 1 + .../workspace/layouts/WorkspaceBaseLayout.tsx | 8 +++-- 6 files changed, 52 insertions(+), 45 deletions(-) diff --git a/client/modules/_hooks/src/workspace/useInteractiveModalContext.ts b/client/modules/_hooks/src/workspace/useInteractiveModalContext.ts index aeb998983..c28b54254 100644 --- a/client/modules/_hooks/src/workspace/useInteractiveModalContext.ts +++ b/client/modules/_hooks/src/workspace/useInteractiveModalContext.ts @@ -1,8 +1,19 @@ import React, { createContext, useContext } from 'react'; -export const InteractiveModalContext = createContext< - [boolean, React.Dispatch>] | null ->(null); +type TInteractiveModalDetails = { + show: boolean; + interactiveSessionLink?: string; + message?: string; + openedBySubmit?: boolean; +}; + +export type TInteractiveModalContext = [ + TInteractiveModalDetails, + React.Dispatch> +]; + +export const InteractiveModalContext = + createContext(null); export const useInteractiveModalContext = () => { return useContext(InteractiveModalContext); diff --git a/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx b/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx index cfd97fef4..d4202b5bb 100644 --- a/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx +++ b/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx @@ -20,9 +20,9 @@ import { useGetAllocationsSuspense, TTapisJob, useInteractiveModalContext, + TInteractiveModalContext, } from '@client/hooks'; import { AppsSubmissionDetails } from '../AppsSubmissionDetails/AppsSubmissionDetails'; -import { InteractiveSessionModal } from '../InteractiveSessionModal/InteractiveSessionModal'; import { AppsWizard } from '../AppsWizard/AppsWizard'; import { default as FormSchema, @@ -75,11 +75,8 @@ export const AppsSubmissionForm: React.FC = () => { data: TTapisJob; }; - const [showInteractiveModal, setShowInteractiveModal] = - useInteractiveModalContext() as [ - boolean, - React.Dispatch> - ]; + const [_, setInteractiveModalDetails] = + useInteractiveModalContext() as TInteractiveModalContext; const { definition, license, defaultSystemNeedsKeys } = app; @@ -377,7 +374,7 @@ export const AppsSubmissionForm: React.FC = () => { } else if (isSuccess) { reset(initialValues); if (definition.notes.isInteractive) { - setShowInteractiveModal(true); + setInteractiveModalDetails({ show: true, openedBySubmit: true }); } } }, [submitResult]); @@ -645,11 +642,6 @@ export const AppsSubmissionForm: React.FC = () => { setIsModalOpen={setPushKeysSystem} onSuccess={() => submitVariables && submitJob(submitVariables)} /> - setShowInteractiveModal(false)} - openedBySubmit - /> ); }; diff --git a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx index 5c30d7321..dc361a9be 100644 --- a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx +++ b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx @@ -1,26 +1,24 @@ import { Modal } from 'antd'; import React from 'react'; import { PrimaryButton } from '@client/common-components'; +import { + useInteractiveModalContext, + TInteractiveModalContext, +} from '@client/hooks'; import styles from './InteractiveSessionModal.module.css'; -export const InteractiveSessionModal: React.FC<{ - isOpen: boolean; - interactiveSessionLink?: string; - message?: string; - onCancel: VoidFunction; - openedBySubmit?: boolean; -}> = ({ - isOpen, - interactiveSessionLink, - message, - onCancel, - openedBySubmit, -}) => { +export const InteractiveSessionModal: React.FC<{}> = () => { + const [interactiveModalDetails, setInteractiveModalDetails] = + useInteractiveModalContext() as TInteractiveModalContext; + + const { interactiveSessionLink, message, openedBySubmit, show } = + interactiveModalDetails; + return ( Open Session} width="500px" - open={isOpen} + open={show} footer={ } - onCancel={onCancel} + onCancel={() => + setInteractiveModalDetails({ + show: false, + }) + } >
{interactiveSessionLink ? ( diff --git a/client/modules/workspace/src/JobsListing/JobsListing.tsx b/client/modules/workspace/src/JobsListing/JobsListing.tsx index 5264e2830..63987b2d8 100644 --- a/client/modules/workspace/src/JobsListing/JobsListing.tsx +++ b/client/modules/workspace/src/JobsListing/JobsListing.tsx @@ -14,6 +14,7 @@ import { useReadNotifications, TGetNotificationsResponse, useInteractiveModalContext, + TInteractiveModalContext, } from '@client/hooks'; import { JobsListingTable, @@ -27,7 +28,6 @@ import { isInteractiveJob, isTerminalState, } from '../utils'; -import { InteractiveSessionModal } from '../InteractiveSessionModal'; import styles from './JobsListing.module.css'; import { formatDateTimeFromValue } from '../utils/timeFormat'; import { JobsReuseInputsButton } from '../JobsReuseInputsButton/JobsReuseInputsButton'; @@ -63,17 +63,20 @@ const InteractiveSessionButtons: React.FC<{ interactiveSessionLink?: string; message?: string; }> = ({ uuid, interactiveSessionLink, message }) => { - const [showInteractiveModal, setShowInteractiveModal] = - useInteractiveModalContext() as [ - boolean, - React.Dispatch> - ]; + const [_, setInteractiveModalDetails] = + useInteractiveModalContext() as TInteractiveModalContext; return ( <> setShowInteractiveModal(true)} + onClick={() => + setInteractiveModalDetails({ + show: true, + interactiveSessionLink, + message, + }) + } > Open @@ -83,12 +86,6 @@ const InteractiveSessionButtons: React.FC<{ title="End" size="small" /> - setShowInteractiveModal(false)} - /> ); }; diff --git a/client/modules/workspace/src/index.ts b/client/modules/workspace/src/index.ts index 694e66c4f..826f4ff46 100644 --- a/client/modules/workspace/src/index.ts +++ b/client/modules/workspace/src/index.ts @@ -9,3 +9,4 @@ export * from './SystemsPushKeysModal/SystemsPushKeysModal'; export * from './Toast'; export * from './utils'; export * from './constants'; +export * from './InteractiveSessionModal'; diff --git a/client/src/workspace/layouts/WorkspaceBaseLayout.tsx b/client/src/workspace/layouts/WorkspaceBaseLayout.tsx index 7f92fb7fe..b55776db1 100644 --- a/client/src/workspace/layouts/WorkspaceBaseLayout.tsx +++ b/client/src/workspace/layouts/WorkspaceBaseLayout.tsx @@ -7,6 +7,7 @@ import { useGetAppParams, AppsBreadcrumb, Toast, + InteractiveSessionModal, } from '@client/workspace'; import { Spinner } from '@client/common-components'; import { @@ -26,7 +27,9 @@ const WorkspaceRoot: React.FC = () => { usePrefetchGetAllocations(); const { data, isLoading } = useAppsListing(); - const [showInteractiveModal, setShowInteractiveModal] = useState(false); + const [interactiveModalDetails, setInteractiveModalDetails] = useState({ + show: false, + }); if (!data || isLoading) return ( @@ -44,7 +47,7 @@ const WorkspaceRoot: React.FC = () => { return ( { + ); }; From cd20bd857f18dbae492ac25b862a987458b121f3 Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Thu, 3 Oct 2024 16:29:07 -0500 Subject: [PATCH 04/12] update existing modal context upon interactive session ready --- client/modules/workspace/src/Toast/Toast.tsx | 104 ++++++++++--------- 1 file changed, 57 insertions(+), 47 deletions(-) diff --git a/client/modules/workspace/src/Toast/Toast.tsx b/client/modules/workspace/src/Toast/Toast.tsx index 576476be9..17c7b3ee0 100644 --- a/client/modules/workspace/src/Toast/Toast.tsx +++ b/client/modules/workspace/src/Toast/Toast.tsx @@ -8,6 +8,8 @@ import { Icon } from '@client/common-components'; import { TJobStatusNotification, TGetNotificationsResponse, + useInteractiveModalContext, + TInteractiveModalContext, } from '@client/hooks'; import { getToastMessage } from '../utils'; import styles from './Notifications.module.css'; @@ -18,60 +20,68 @@ const Notifications = () => { ); const [api, contextHolder] = notification.useNotification({ maxCount: 1 }); + const [interactiveModalDetails, setInteractiveModalDetails] = + useInteractiveModalContext() as TInteractiveModalContext; const queryClient = useQueryClient(); const navigate = useNavigate(); const handleNotification = (notification: TJobStatusNotification) => { - if ( - notification.event_type === 'job' || - notification.event_type === 'interactive_session_ready' - ) { - queryClient.invalidateQueries({ - queryKey: ['workspace', 'notifications'], - }); - queryClient.invalidateQueries({ - queryKey: ['workspace', 'jobsListing'], - }); - api.open({ - message: ( - - {getToastMessage(notification)} - - - ), - placement: 'bottomLeft', - icon: , - className: `${ - notification.extra.status === 'FAILED' && styles['toast-is-error'] - } ${styles.root}`, - closeIcon: false, - duration: 5, - onClick: () => { - navigate('/history'); - }, - }); - } else if (notification.event_type === 'markAllNotificationsAsRead') { - // update unread count state - queryClient.setQueryData( - [ - 'workspace', - 'notifications', - { - eventTypes: ['interactive_session_ready', 'job'], - read: false, - markRead: false, + switch (notification.event_type) { + case 'interactive_session_ready': + setInteractiveModalDetails({ + ...interactiveModalDetails, + interactiveSessionLink: notification.action_link, + message: notification.message, + }); + case 'job': + queryClient.invalidateQueries({ + queryKey: ['workspace', 'notifications'], + }); + queryClient.invalidateQueries({ + queryKey: ['workspace', 'jobsListing'], + }); + api.open({ + message: ( + + {getToastMessage(notification)} + + + ), + placement: 'bottomLeft', + icon: , + className: `${ + notification.extra.status === 'FAILED' && styles['toast-is-error'] + } ${styles.root}`, + closeIcon: false, + duration: 5, + onClick: () => { + navigate('/history'); }, - ], - (oldData: TGetNotificationsResponse) => { - return { - ...oldData, - notifs: [], - unread: 0, - }; - } - ); + }); + break; + case 'markAllNotificationsAsRead': + // update unread count state + queryClient.setQueryData( + [ + 'workspace', + 'notifications', + { + eventTypes: ['interactive_session_ready', 'job'], + read: false, + markRead: false, + }, + ], + (oldData: TGetNotificationsResponse) => { + return { + ...oldData, + notifs: [], + unread: 0, + }; + } + ); + break; } }; From c348f7163a655a5733588d945c6e0f7a2f6cb2bd Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Thu, 3 Oct 2024 18:39:49 -0500 Subject: [PATCH 05/12] new design --- .../InteractiveSessionModal.module.css | 13 ++-- .../InteractiveSessionModal.tsx | 62 ++++++++++--------- 2 files changed, 39 insertions(+), 36 deletions(-) diff --git a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.module.css b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.module.css index 06d6f18f3..9a6470880 100644 --- a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.module.css +++ b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.module.css @@ -1,13 +1,8 @@ -.session-modal-header { - background-color: #f4f4f4; - h5 { - font-weight: normal; - } -} - .session-modal-body { display: flex; flex-direction: column; + margin-bottom: 25px; + min-height: 225px; & > * { margin: 0.4rem; } @@ -17,3 +12,7 @@ color: grey; font-style: italic; } + +.icon { + margin-left: 10px; +} diff --git a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx index dc361a9be..32172faaf 100644 --- a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx +++ b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx @@ -1,6 +1,6 @@ -import { Modal } from 'antd'; import React from 'react'; -import { PrimaryButton } from '@client/common-components'; +import { Modal } from 'antd'; +import { PrimaryButton, Icon } from '@client/common-components'; import { useInteractiveModalContext, TInteractiveModalContext, @@ -16,18 +16,14 @@ export const InteractiveSessionModal: React.FC<{}> = () => { return ( Open Session} - width="500px" - open={show} - footer={ - - Connect - + title={ +

+ Interactive Session is {interactiveSessionLink ? 'Ready' : 'Queueing'} +

} + width="650px" + open={show} + footer={null} onCancel={() => setInteractiveModalDetails({ show: false, @@ -35,24 +31,32 @@ export const InteractiveSessionModal: React.FC<{}> = () => { } >
- {interactiveSessionLink ? ( +
+ + Connect + + +
+ {openedBySubmit && !!!interactiveSessionLink && ( - Click the button below to connect to the interactive session. + While you wait, you can either: +
    +
  • Keep this modal open and wait to connect.
    • +
  • + Close this window and wait for a notification via{' '} + Job Status. +
    • +
- ) : ( - <> - - Your session is loading. You can keep this modal open, and wait - here for an access button. - - {openedBySubmit && ( - - { - '(Or you can close this modal, and wait for a notification to access your job via Job Status.)' - } - - )} - )} {message && {message}} {interactiveSessionLink && ( From 0e0f081698c8f543a28ad597f6741a32689fe0d3 Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Fri, 4 Oct 2024 09:40:45 -0500 Subject: [PATCH 06/12] change launch button wording --- .../AppsSubmissionDetails/AppsSubmissionDetails.tsx | 4 ++-- .../InteractiveSessionModal.tsx | 10 ++++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/client/modules/workspace/src/AppsSubmissionDetails/AppsSubmissionDetails.tsx b/client/modules/workspace/src/AppsSubmissionDetails/AppsSubmissionDetails.tsx index b388c2cc3..733bd601d 100644 --- a/client/modules/workspace/src/AppsSubmissionDetails/AppsSubmissionDetails.tsx +++ b/client/modules/workspace/src/AppsSubmissionDetails/AppsSubmissionDetails.tsx @@ -259,9 +259,9 @@ export const AppsSubmissionDetails: React.FC<{ htmlType="submit" disabled={!isValid} loading={isSubmitting} - style={{ width: 120 }} + style={{ width: 130 }} > - {definition.notes.isInteractive ? 'Start Session' : 'Submit Job'} + {definition.notes.isInteractive ? 'Launch Session' : 'Submit Job'} } /> diff --git a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx index 32172faaf..0538254be 100644 --- a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx +++ b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx @@ -40,10 +40,12 @@ export const InteractiveSessionModal: React.FC<{}> = () => { size="large" > Connect - + {interactiveSessionLink && ( + + )}
{openedBySubmit && !!!interactiveSessionLink && ( From 0598e1208f5b972a66bce72ed0763035243a0d98 Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Fri, 4 Oct 2024 09:41:23 -0500 Subject: [PATCH 07/12] linting --- client/src/workspace/layouts/WorkspaceBaseLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/workspace/layouts/WorkspaceBaseLayout.tsx b/client/src/workspace/layouts/WorkspaceBaseLayout.tsx index b55776db1..b454d92de 100644 --- a/client/src/workspace/layouts/WorkspaceBaseLayout.tsx +++ b/client/src/workspace/layouts/WorkspaceBaseLayout.tsx @@ -1,4 +1,4 @@ -import React, { createContext, useState } from 'react'; +import React, { useState } from 'react'; import { Outlet } from 'react-router-dom'; import { Flex, Layout } from 'antd'; import { From 3c5659b47721437d6fbd3ec2812b6e1a4c59ee57 Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Fri, 4 Oct 2024 10:16:26 -0500 Subject: [PATCH 08/12] remove default message for interactive session --- designsafe/apps/webhooks/views.py | 1 - 1 file changed, 1 deletion(-) diff --git a/designsafe/apps/webhooks/views.py b/designsafe/apps/webhooks/views.py index 389289e54..47b6bfd69 100644 --- a/designsafe/apps/webhooks/views.py +++ b/designsafe/apps/webhooks/views.py @@ -173,7 +173,6 @@ def post(self, request, *args, **kwargs): Notification.EVENT_TYPE: event_type, Notification.STATUS: Notification.INFO, Notification.USER: job_owner, - Notification.MESSAGE: "Ready to view.", Notification.ACTION_LINK: address, } From 7f802af6bfa3bfc09e6723b8a324fe6fab911b11 Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Fri, 4 Oct 2024 10:24:34 -0500 Subject: [PATCH 09/12] change resubmit to relaunch for interactive apps --- .../modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx | 2 +- client/modules/workspace/src/JobsListing/JobsListing.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx b/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx index e4bc16be9..8d51712e4 100644 --- a/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx +++ b/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx @@ -235,7 +235,7 @@ export const JobsDetailModalBody: React.FC<{ (isInteractiveJob(jobData) ? ( diff --git a/client/modules/workspace/src/JobsListing/JobsListing.tsx b/client/modules/workspace/src/JobsListing/JobsListing.tsx index 63987b2d8..a5d50ba44 100644 --- a/client/modules/workspace/src/JobsListing/JobsListing.tsx +++ b/client/modules/workspace/src/JobsListing/JobsListing.tsx @@ -177,7 +177,7 @@ export const JobsListing: React.FC> = ({ ) : ( From bd7a19a11845c9d1662a7c0b02135d5d45a70af7 Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Fri, 4 Oct 2024 11:14:03 -0500 Subject: [PATCH 10/12] linting --- client/src/workspace/layouts/AppsViewLayout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/workspace/layouts/AppsViewLayout.tsx b/client/src/workspace/layouts/AppsViewLayout.tsx index b78563fd9..39f617613 100644 --- a/client/src/workspace/layouts/AppsViewLayout.tsx +++ b/client/src/workspace/layouts/AppsViewLayout.tsx @@ -51,6 +51,7 @@ export const AppsViewLayout: React.FC = () => { View User Guide From fa60f3ad7d8284d45898d0ef5a606829e955d1ce Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Fri, 4 Oct 2024 11:33:03 -0500 Subject: [PATCH 11/12] linting --- .../src/AppsSubmissionForm/AppsSubmissionForm.tsx | 2 +- .../InteractiveSessionModal.tsx | 6 +++--- .../workspace/src/JobsDetailModal/JobsDetailModal.tsx | 4 +--- .../modules/workspace/src/JobsListing/JobsListing.tsx | 10 +++------- client/modules/workspace/src/Toast/Toast.tsx | 5 +++-- 5 files changed, 11 insertions(+), 16 deletions(-) diff --git a/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx b/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx index d4202b5bb..7ae8145bb 100644 --- a/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx +++ b/client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx @@ -75,7 +75,7 @@ export const AppsSubmissionForm: React.FC = () => { data: TTapisJob; }; - const [_, setInteractiveModalDetails] = + const [, setInteractiveModalDetails] = useInteractiveModalContext() as TInteractiveModalContext; const { definition, license, defaultSystemNeedsKeys } = app; diff --git a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx index 0538254be..68e5cc490 100644 --- a/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx +++ b/client/modules/workspace/src/InteractiveSessionModal/InteractiveSessionModal.tsx @@ -7,7 +7,7 @@ import { } from '@client/hooks'; import styles from './InteractiveSessionModal.module.css'; -export const InteractiveSessionModal: React.FC<{}> = () => { +export const InteractiveSessionModal = () => { const [interactiveModalDetails, setInteractiveModalDetails] = useInteractiveModalContext() as TInteractiveModalContext; @@ -35,7 +35,7 @@ export const InteractiveSessionModal: React.FC<{}> = () => { @@ -48,7 +48,7 @@ export const InteractiveSessionModal: React.FC<{}> = () => { )}
- {openedBySubmit && !!!interactiveSessionLink && ( + {openedBySubmit && !interactiveSessionLink && ( While you wait, you can either:
    diff --git a/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx b/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx index 8d51712e4..80f85a9be 100644 --- a/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx +++ b/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx @@ -296,8 +296,7 @@ export const JobsDetailModal: React.FC<{ uuid: string }> = ({ uuid }) => { -
    +
    Job Detail: {uuid} {jobData && (
    @@ -310,7 +309,6 @@ export const JobsDetailModal: React.FC<{ uuid: string }> = ({ uuid }) => {
    )}
    - } width="60%" open={isModalOpen} diff --git a/client/modules/workspace/src/JobsListing/JobsListing.tsx b/client/modules/workspace/src/JobsListing/JobsListing.tsx index a5d50ba44..36b4d637d 100644 --- a/client/modules/workspace/src/JobsListing/JobsListing.tsx +++ b/client/modules/workspace/src/JobsListing/JobsListing.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState, useEffect } from 'react'; +import React, { useMemo, useEffect } from 'react'; import useWebSocket from 'react-use-websocket'; import { TableProps, Row, Flex, Button as AntButton } from 'antd'; import type { ButtonSize } from 'antd/es/button'; @@ -63,7 +63,7 @@ const InteractiveSessionButtons: React.FC<{ interactiveSessionLink?: string; message?: string; }> = ({ uuid, interactiveSessionLink, message }) => { - const [_, setInteractiveModalDetails] = + const [, setInteractiveModalDetails] = useInteractiveModalContext() as TInteractiveModalContext; return ( @@ -249,9 +249,5 @@ export const JobsListing: React.FC> = ({ [interactiveSessionNotifs] ); - return ( - <> - - - ); + return ; }; diff --git a/client/modules/workspace/src/Toast/Toast.tsx b/client/modules/workspace/src/Toast/Toast.tsx index 17c7b3ee0..77544778a 100644 --- a/client/modules/workspace/src/Toast/Toast.tsx +++ b/client/modules/workspace/src/Toast/Toast.tsx @@ -35,6 +35,7 @@ const Notifications = () => { interactiveSessionLink: notification.action_link, message: notification.message, }); + /* falls through */ case 'job': queryClient.invalidateQueries({ queryKey: ['workspace', 'notifications'], @@ -89,9 +90,9 @@ const Notifications = () => { if (lastMessage !== null) { handleNotification(JSON.parse(lastMessage.data)); } - }, [lastMessage]); + }, [lastMessage, handleNotification]); - return <>{contextHolder}; + return contextHolder; }; export default Notifications; From 55970f3e9601cf36c4816461ceb8888177d9108c Mon Sep 17 00:00:00 2001 From: Sal Tijerina Date: Fri, 4 Oct 2024 11:35:04 -0500 Subject: [PATCH 12/12] formatting --- .../src/JobsDetailModal/JobsDetailModal.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx b/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx index 80f85a9be..dc29a3d51 100644 --- a/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx +++ b/client/modules/workspace/src/JobsDetailModal/JobsDetailModal.tsx @@ -297,18 +297,18 @@ export const JobsDetailModal: React.FC<{ uuid: string }> = ({ uuid }) => { className={`${styles.root} job-history-modal`} title={
    - Job Detail: {uuid} - {jobData && ( -
    -
    Job UUID:
    -
    {jobData.uuid}
    -
    Application:
    -
    {JSON.parse(jobData.notes).label || jobData.appId}
    -
    System:
    -
    {jobData.execSystemId}
    -
    - )} -
    + Job Detail: {uuid} + {jobData && ( +
    +
    Job UUID:
    +
    {jobData.uuid}
    +
    Application:
    +
    {JSON.parse(jobData.notes).label || jobData.appId}
    +
    System:
    +
    {jobData.execSystemId}
    +
    + )} +
    } width="60%" open={isModalOpen}