Implement new App Launcher Not Running Page/Functionality

jhub_apps/service/japps_routes.py

@@ -23,7 +23,7 @@ async def handle_apps(request: Request):
     if not theme:
         theme = themes.DEFAULT_THEME
     return templates.TemplateResponse(
-        "japps_home.html",
+        "japps_custom.html",
         {
             "request": request,
             "version_hash": now.strftime("%Y%m%d%H%M%S"),

jhub_apps/service/routes.py

@@ -34,7 +34,8 @@
     get_conda_envs,
     get_jupyterhub_config,
     get_spawner_profiles,
-    get_thumbnail_data_url, get_shared_servers,
+    get_thumbnail_data_url,
+    get_shared_servers,
 )
 from jhub_apps.spawner.types import FRAMEWORKS
 from jhub_apps.version import get_version
@@ -101,7 +102,12 @@ async def get_server(user: User = Depends(get_current_user), server_name=None):
     hub_client = HubClient(username=user.name)
     hub_user = hub_client.get_user()
     user_servers = hub_user["servers"]
-    if server_name:
+
+    # If server_name is 'lab' then it is the default user
+    if server_name == "lab" or server_name == "vscode":
+        server_name = ""
+
+    if server_name is not None:
         # Get a particular server
         for s_name, server_details in user_servers.items():
             if s_name == server_name:

jhub_apps/templates/home.html

@@ -1,17 +1 @@
-{% extends "page.html" %} {% block main %}
-
-<div id="root"></div>
-<script src="/services/japps/static/js/index.js?v={{version_hash}}"></script>
-<link
-  rel="stylesheet"
-  href="/services/japps/static/css/index.css?v={{version_hash}}"
-/>
-<script type="text/javascript">
-  window.theme = {
-    logo: "{{ logo }}",
-  };
-  // Hide the navbar since using new one
-  document.querySelector(".navbar")?.style.setProperty("display", "none");
-</script>
-
-{% endblock %}
+{% extends "japps_page.html" %}

jhub_apps/templates/japps_page.html

@@ -0,0 +1,17 @@
+{% extends "page.html" %} {% block main %}
+
+<div id="root"></div>
+<script src="/services/japps/static/js/index.js?v={{version_hash}}"></script>
+<link
+  rel="stylesheet"
+  href="/services/japps/static/css/index.css?v={{version_hash}}"
+/>
+<script type="text/javascript">
+  window.theme = {
+    logo: "{{ logo }}",
+  };
+  // Hide the navbar since using new one
+  document.querySelector(".navbar")?.style.setProperty("display", "none");
+</script>
+
+{% endblock %}

jhub_apps/templates/not_running.html

@@ -0,0 +1 @@
+{% extends "japps_page.html" %}

jhub_apps/templates/style.css

@@ -441,6 +441,10 @@ a:focus {
     border: unset;
 }
 
+.card-dialog-body-wrapper {
+    padding: 0 24px 20px !important;
+}
+
 .MuiButton-containedPrimary:not(:disabled) {
     color: var(--light-text-color);
     background-color: var(--primary-color) !important;

ui/src/App.tsx

@@ -7,6 +7,7 @@ import { Navigation, NotificationBar } from './components';
 import { CreateApp } from './pages/create-app/create-app';
 import { EditApp } from './pages/edit-app/edit-app';
 import { Home } from './pages/home/home';
+import { NotRunning } from './pages/not-running/not-running';
 import { ServerTypes } from './pages/server-types/server-types';
 import {
   currentNotification,
@@ -108,6 +109,7 @@ export const App = (): React.ReactElement => {
         )}
         <Routes>
           <Route path="/home" element={<Home />} />
+          <Route path="/user/:id/*" element={<NotRunning />} />
           <Route path="/create-app" element={<CreateApp />} />
           <Route path="/edit-app" element={<EditApp />} />
           <Route path="/server-types" element={<ServerTypes />} />

ui/src/components/app-card/app-card.tsx

@@ -20,6 +20,7 @@ import {
   currentNotification,
   currentProfiles as defaultProfiles,
   isDeleteOpen,
+  isStartNotRunningOpen,
   isStartOpen,
   isStopOpen,
 } from '../../store';
@@ -66,6 +67,7 @@ export const AppCard = ({
   const [, setIsStartOpen] = useRecoilState<boolean>(isStartOpen);
   const [, setIsStopOpen] = useRecoilState<boolean>(isStopOpen);
   const [, setIsDeleteOpen] = useRecoilState<boolean>(isDeleteOpen);
+  const [, setIsStartNotRunningOpen] = useRecoilState(isStartNotRunningOpen);
 
   useEffect(() => {
     if (!serverStatus) {
@@ -182,7 +184,26 @@ export const AppCard = ({
       id={`card-${id}`}
       tabIndex={0}
     >
-      <Link href={url}>
+      <Link
+        href={url}
+        onClick={(e) => {
+          if (app && serverStatus === 'Ready') {
+            e.preventDefault();
+            setCurrentApp({
+              id,
+              name: title,
+              framework: app?.framework || '',
+              url: app?.url || '',
+              ready: app?.ready || false,
+              public: app?.public || false,
+              shared: false,
+              last_activity: new Date(app?.last_activity || ''),
+              status: 'Ready',
+            });
+            setIsStartNotRunningOpen(true);
+          }
+        }}
+      >
         <Card id={`card-${id}`} tabIndex={0} className="Mui-card">
           <div
             className={`card-content-header ${isAppCard ? '' : 'card-content-header-service'}`}

ui/src/components/context-menu/context-menu.tsx

@@ -125,6 +125,7 @@ export const ContextMenu = ({
               }}
               onClick={(e) => {
                 if (!item.disabled && item.onClick) {
+                  e.stopPropagation();
                   item.onClick(e);
                 }
                 handleClose();

ui/src/data/api.ts

@@ -63,6 +63,7 @@ export const app: AppQueryGetProps = {
   last_activity: '',
   pending: null,
   ready: true,
+  started: '',
   stopped: false,
   url: 'http://',
   user_options: {
@@ -92,6 +93,7 @@ export const serverApps = {
     {
       name: '',
       url: '/user/test',
+      started: '2021-01-01T00:00:00',
       ready: true,
       user_options: {
         profile: 'small1',

ui/src/pages/home/home.css

@@ -1,5 +1,5 @@
 .card-dialog-body-wrapper {
-  padding: 0px 24px;
+  padding: 0px 24px 8px 24px;
 }
 
 .card-dialog-body {

ui/src/pages/home/home.test.tsx

@@ -1,4 +1,5 @@
-import { apps } from '@src/data/api';
+import { app, apps } from '@src/data/api';
+import { currentUser } from '@src/data/user';
 import axios from '@src/utils/axios';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import '@testing-library/jest-dom';
@@ -14,7 +15,9 @@ import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import {
   currentApp as defaultApp,
+  currentUser as defaultUser,
   isDeleteOpen,
+  isStartNotRunningOpen,
   isStartOpen,
   isStopOpen,
 } from '../../../src/store';
@@ -36,6 +39,7 @@ describe('Home', () => {
   beforeEach(() => {
     queryClient.clear();
     mock.reset();
+    sessionStorage.clear();
   });
 
   const componentWrapper = (
@@ -431,4 +435,184 @@ describe('Home', () => {
 
     expect(document.location.pathname).toBe('/');
   });
+
+  test('renders with server not running modal startAppId', async () => {
+    sessionStorage.setItem('startAppId', 'test-app-1');
+    mock.onGet(new RegExp('/server/app-1')).reply(200, app);
+    queryClient.setQueryData(['app-form'], app);
+    const { baseElement } = render(
+      <RecoilRoot initializeState={({ set }) => set(defaultUser, currentUser)}>
+        <QueryClientProvider client={queryClient}>
+          <Home />
+        </QueryClientProvider>
+      </RecoilRoot>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  test('should render with server not running modal', async () => {
+    mock.onGet(new RegExp('/server/app-1')).reply(200, app);
+    const { baseElement } = render(
+      <RecoilRoot
+        initializeState={({ set }) => set(isStartNotRunningOpen, true)}
+      >
+        <QueryClientProvider client={queryClient}>
+          <BrowserRouter>
+            <Home />
+          </BrowserRouter>
+        </QueryClientProvider>
+      </RecoilRoot>,
+    );
+
+    await waitFor(() => {
+      const startModal = within(baseElement).getByTestId(
+        'StartNotRunningModal',
+      );
+      expect(startModal).toBeInTheDocument();
+    });
+
+    const cancelBtn = baseElement.querySelector(
+      '#cancel-btn',
+    ) as HTMLButtonElement;
+    await act(async () => {
+      cancelBtn.click();
+    });
+    expect(document.location.pathname).toBe('/');
+  });
+
+  test('should render with server not running modal and submit', async () => {
+    mock.onGet(`/server/test-app-1`).reply(200);
+    const { baseElement } = render(
+      <RecoilRoot
+        initializeState={({ set }) => {
+          set(isStartNotRunningOpen, true);
+          set(defaultApp, apps[0]);
+        }}
+      >
+        <QueryClientProvider client={queryClient}>
+          <BrowserRouter>
+            <Home />
+          </BrowserRouter>
+        </QueryClientProvider>
+      </RecoilRoot>,
+    );
+
+    await waitFor(() => {
+      const startModal = within(baseElement).getByTestId(
+        'StartNotRunningModal',
+      );
+      expect(startModal).toBeInTheDocument();
+    });
+
+    const startBtn = baseElement.querySelector(
+      '#start-btn',
+    ) as HTMLButtonElement;
+    await act(async () => {
+      startBtn.click();
+    });
+    expect(document.location.pathname).toBe('/');
+  });
+
+  test('should render with server not running modal for default app and submit', async () => {
+    mock.onGet(`/server/test-app-1`).reply(200);
+    const app = { ...apps[0], id: '', name: 'JupyterLab' };
+    const { baseElement } = render(
+      <RecoilRoot
+        initializeState={({ set }) => {
+          set(isStartNotRunningOpen, true);
+          set(defaultApp, app);
+          set(defaultUser, currentUser);
+        }}
+      >
+        <QueryClientProvider client={queryClient}>
+          <BrowserRouter>
+            <Home />
+          </BrowserRouter>
+        </QueryClientProvider>
+      </RecoilRoot>,
+    );
+
+    await waitFor(() => {
+      const startModal = within(baseElement).getByTestId(
+        'StartNotRunningModal',
+      );
+      expect(startModal).toBeInTheDocument();
+    });
+
+    const startBtn = baseElement.querySelector(
+      '#start-btn',
+    ) as HTMLButtonElement;
+    await act(async () => {
+      startBtn.click();
+    });
+    expect(document.location.pathname).toBe('/');
+  });
+
+  test('should render with server not running modal for default app and not submit', async () => {
+    mock.onGet(`/server/test-app-1`).reply(200);
+    const app = { ...apps[0], id: '', name: 'JupyterLab' };
+    const { baseElement } = render(
+      <RecoilRoot
+        initializeState={({ set }) => {
+          set(isStartNotRunningOpen, true);
+          set(defaultApp, app);
+          set(defaultUser, undefined);
+        }}
+      >
+        <QueryClientProvider client={queryClient}>
+          <BrowserRouter>
+            <Home />
+          </BrowserRouter>
+        </QueryClientProvider>
+      </RecoilRoot>,
+    );
+
+    await waitFor(() => {
+      const startModal = within(baseElement).getByTestId(
+        'StartNotRunningModal',
+      );
+      expect(startModal).toBeInTheDocument();
+    });
+
+    const startBtn = baseElement.querySelector(
+      '#start-btn',
+    ) as HTMLButtonElement;
+    await act(async () => {
+      startBtn.click();
+    });
+    expect(document.location.pathname).toBe('/');
+  });
+
+  test('should render with server not running modal and not submit when no current app', async () => {
+    mock.onGet(new RegExp('/server/*')).reply(500, { message: 'Some error' });
+    const { baseElement } = render(
+      <RecoilRoot
+        initializeState={({ set }) => {
+          set(isStartNotRunningOpen, true);
+          set(defaultApp, undefined);
+        }}
+      >
+        <QueryClientProvider client={queryClient}>
+          <BrowserRouter>
+            <Home />
+          </BrowserRouter>
+        </QueryClientProvider>
+      </RecoilRoot>,
+    );
+
+    await waitFor(() => {
+      const startModal = within(baseElement).getByTestId(
+        'StartNotRunningModal',
+      );
+      expect(startModal).toBeInTheDocument();
+    });
+
+    const startBtn = baseElement.querySelector(
+      '#start-btn',
+    ) as HTMLButtonElement;
+    await act(async () => {
+      startBtn.click();
+    });
+    expect(document.location.pathname).toBe('/');
+  });
 });