Display success message on list view after creating a job (#297)

Author: JasonWeill

src/components/job-row.tsx

@@ -74,11 +74,12 @@ type DownloadFilesButtonProps = {
 
 function DownloadFilesButton(props: DownloadFilesButtonProps) {
   const [downloading, setDownloading] = useState(false);
+  const trans = useTranslator('jupyterlab');
 
   return (
     <IconButton
       aria-label="download"
-      title="Download Job Files"
+      title={trans.__('Download Job Files')}
       disabled={downloading}
       onClick={async () => {
         setDownloading(true);
@@ -109,11 +110,12 @@ export function buildJobRow(
   const inputFile = job.job_files.find(
     jobFile => jobFile.file_format === 'input' && jobFile.file_path
   );
+  const trans = useTranslator('jupyterlab');
 
   const cellContents: React.ReactNode[] = [
     <Link
       onClick={() => showDetailView(job.job_id)}
-      title={`Open detail view for "${job.name}"`}
+      title={trans.__('Open detail view for "%1"', job.name)}
     >
       {job.name}
     </Link>,

src/mainviews/create-job.tsx

@@ -46,7 +46,9 @@ export interface ICreateJobProps {
   model: ICreateJobModel;
   handleModelChange: (model: ICreateJobModel) => void;
   showListView: (
-    list: JobsView.ListJobs | JobsView.ListJobDefinitions
+    list: JobsView.ListJobs | JobsView.ListJobDefinitions,
+    newlyCreatedId?: string,
+    newlyCreatedName?: string
   ) => unknown;
   // Extension point: optional additional component
   advancedOptions: React.FunctionComponent<SchedulerTokens.IAdvancedOptionsProps>;
@@ -334,7 +336,7 @@ export function CreateJob(props: ICreateJobProps): JSX.Element {
       .createJob(jobOptions)
       .then(response => {
         // Switch to the list view with "Job List" active
-        props.showListView(JobsView.ListJobs);
+        props.showListView(JobsView.ListJobs, response.job_id, jobOptions.name);
       })
       .catch((error: Error) => {
         props.handleModelChange({
@@ -381,7 +383,11 @@ export function CreateJob(props: ICreateJobProps): JSX.Element {
       .createJobDefinition(jobDefinitionOptions)
       .then(response => {
         // Switch to the list view with "Job Definition List" active
-        props.showListView(JobsView.ListJobDefinitions);
+        props.showListView(
+          JobsView.ListJobDefinitions,
+          response.job_definition_id,
+          jobDefinitionOptions.name
+        );
       })
       .catch((error: Error) => {
         props.handleModelChange({

src/mainviews/list-jobs.tsx

@@ -39,6 +39,7 @@ export function ListJobsTable(props: IListJobsTableProps): JSX.Element {
   const [deletedRows, setDeletedRows] = useState<
     Set<Scheduler.IDescribeJob['job_id']>
   >(new Set());
+
   const trans = useTranslator('jupyterlab');
 
   // Cache environment list — we need this for the output formats.
@@ -185,7 +186,10 @@ function ListJobDefinitionsTable(props: ListJobDefinitionsTableProps) {
   const [deletedRows, setDeletedRows] = useState<
     Set<Scheduler.IDescribeJobDefinition['job_definition_id']>
   >(new Set());
-  const [displayError, setDisplayError] = useState<string | null>(null);
+
+  const [displayError, setDisplayError] = useState<React.ReactNode | null>(
+    null
+  );
 
   const api = useMemo(() => new SchedulerService({}), []);
 
@@ -264,7 +268,11 @@ function ListJobDefinitionsTable(props: ListJobDefinitionsTableProps) {
 
   return (
     <>
-      {displayError && <Alert severity="error">{displayError}</Alert>}
+      {displayError && (
+        <Alert severity="error" onClose={() => setDisplayError(null)}>
+          {displayError}
+        </Alert>
+      )}
       {reloadButton}
       <AdvancedTable
         query={jobDefsQuery}
@@ -289,6 +297,8 @@ export interface IListJobsProps {
   showCreateJob: (newModel: ICreateJobModel) => void;
   showJobDetail: (jobId: string) => void;
   showJobDefinitionDetail: (jobDefId: string) => void;
+  newlyCreatedId?: string;
+  newlyCreatedName?: string;
 }
 
 export function NotebookJobsList(props: IListJobsProps): JSX.Element {
@@ -300,6 +310,26 @@ export function NotebookJobsList(props: IListJobsProps): JSX.Element {
     [trans]
   );
 
+  // Display creation message
+  const successMessage =
+    props.newlyCreatedId !== undefined && props.newlyCreatedName !== undefined
+      ? props.listView === JobsView.ListJobs
+        ? trans.__(
+            'Your job "%1" has been created. ' +
+              'If you do not see it in the list below, please reload the list in a few seconds.',
+            props.newlyCreatedName
+          )
+        : trans.__(
+            'Your job definition "%1" has been created. ' +
+              'If you do not see it in the list below, please reload the list in a few seconds.',
+            props.newlyCreatedName
+          )
+      : null;
+
+  const [displayInfo, setDisplayInfo] = useState<React.ReactNode | null>(
+    successMessage
+  );
+
   // Retrieve the initial jobs list
   return (
     <Box sx={{ p: 4 }} style={{ height: '100%', boxSizing: 'border-box' }}>
@@ -317,6 +347,11 @@ export function NotebookJobsList(props: IListJobsProps): JSX.Element {
             value={JobsView.ListJobDefinitions}
           />
         </Tabs>
+        {displayInfo && (
+          <Alert severity="info" onClose={() => setDisplayInfo(null)}>
+            {displayInfo}
+          </Alert>
+        )}
         {props.listView === JobsView.ListJobs && (
           <>
             <Heading level={1}>{jobsHeader}</Heading>

src/notebook-jobs-panel.tsx

@@ -34,6 +34,8 @@ export class NotebookJobsPanel extends VDomRenderer<JobsModel> {
   readonly _translator: ITranslator;
   readonly _trans: TranslationBundle;
   readonly _advancedOptions: React.FunctionComponent<Scheduler.IAdvancedOptionsProps>;
+  private _newlyCreatedId: string | undefined;
+  private _newlyCreatedName: string | undefined;
 
   constructor(options: NotebookJobsPanel.IOptions) {
     super(
@@ -62,7 +64,13 @@ export class NotebookJobsPanel extends VDomRenderer<JobsModel> {
     this.node.setAttribute('aria-label', trans.__('Notebook Jobs'));
   }
 
-  showListView(view: JobsView.ListJobs | JobsView.ListJobDefinitions): void {
+  showListView(
+    view: JobsView.ListJobs | JobsView.ListJobDefinitions,
+    newlyCreatedId?: string,
+    newlyCreatedName?: string
+  ): void {
+    this._newlyCreatedId = newlyCreatedId;
+    this._newlyCreatedName = newlyCreatedName;
     this.model.jobsView = view;
   }
 
@@ -139,6 +147,8 @@ export class NotebookJobsPanel extends VDomRenderer<JobsModel> {
                 showJobDefinitionDetail={this.showJobDefinitionDetail.bind(
                   this
                 )}
+                newlyCreatedId={this._newlyCreatedId}
+                newlyCreatedName={this._newlyCreatedName}
               />
             )}
             {(this.model.jobsView === JobsView.JobDetail ||