fix: links for Recent Submissions on Dashboard (#9651)

Co-authored-by: John Kim <[email protected]>

webui/react/src/components/JupyterLabButton.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import UIProvider, { DefaultTheme } from 'hew/Theme';
+
+import { ThemeProvider } from 'components/ThemeProvider';
+
+import JupyterLabButton from './JupyterLabButton';
+
+const SIMPLE_CONFIG_TEMPLATE_TEXT = 'Template';
+
+vi.mock('services/api', () => ({
+  getTaskTemplates: () => Promise.resolve([]),
+  getWorkspaces: () => Promise.resolve({ workspaces: [] }),
+}));
+
+vi.mock('hooks/useSettings', async (importOriginal) => {
+  const useSettings = vi.fn(() => {
+    const settings = {
+      jupyterLab: {
+        alt: false,
+        ctrl: false,
+        key: 'L',
+        meta: true,
+        shift: true,
+      },
+    };
+    return { isLoading: false, settings };
+  });
+
+  return {
+    __esModule: true,
+    ...(await importOriginal<typeof import('hooks/useSettings')>()),
+    useSettings,
+  };
+});
+
+const user = userEvent.setup();
+
+const setup = (enabled: boolean) => {
+  render(
+    <UIProvider theme={DefaultTheme.Light}>
+      <ThemeProvider>
+        <JupyterLabButton enabled={enabled} />
+      </ThemeProvider>
+    </UIProvider>,
+  );
+};
+
+describe('Dashboard', () => {
+  it('shows disabled state', () => {
+    setup(false);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('opens JupyterLabModal', async () => {
+    setup(true);
+    await user.click(screen.getByRole('button'));
+    expect(screen.getByText(SIMPLE_CONFIG_TEMPLATE_TEXT)).toBeInTheDocument();
+  });
+});

webui/react/src/components/JupyterLabButton.tsx

@@ -24,17 +24,19 @@ const JupyterLabButton: React.FC<Props> = ({ enabled, workspace }: Props) => {
   return (
     <>
       {enabled ? (
-        <Tooltip content={shortcutToString(jupyterLabShortcut)}>
-          <Button onClick={JupyterLabModal.open}>Launch JupyterLab</Button>
-        </Tooltip>
+        <>
+          <Tooltip content={shortcutToString(jupyterLabShortcut)}>
+            <Button onClick={JupyterLabModal.open}>Launch JupyterLab</Button>
+          </Tooltip>
+          <JupyterLabModal.Component workspace={workspace} />
+        </>
       ) : (
         <Tooltip content="You do not have permission to launch JupyterLab" placement="leftBottom">
           <div>
             <Button disabled>Launch JupyterLab</Button>
           </div>
         </Tooltip>
       )}
-      <JupyterLabModal.Component workspace={workspace} />
     </>
   );
 };