Stop pending page

ui/src/App.tsx

@@ -8,6 +8,7 @@ import { CreateApp } from './pages/create-app/create-app';
 import { EditApp } from './pages/edit-app/edit-app';
 import { Home } from './pages/home/home';
 import { ServerTypes } from './pages/server-types/server-types';
+import { StopPending } from './pages/stop-pending/stop-pending';
 import {
  currentNotification,
  currentJhData as defaultJhData,
@@ -111,6 +112,7 @@ export const App = (): React.ReactElement => {
  <Route path="/create-app" element={<CreateApp />} />
  <Route path="/edit-app" element={<EditApp />} />
  <Route path="/server-types" element={<ServerTypes />} />
+ <Route path="/stop-pending" element={<StopPending />} />
  <Route path="/" element={<Home />} />
  </Routes>
  </Box>

ui/src/pages/stop-pending/stop-pending.css

@@ -0,0 +1,22 @@
+#stop-pending.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ font-family: Arial, sans-serif;
+ padding-top: 50px; 
+}
+
+.home-button {
+ background-color: #a020f0; /* Purple color for the button */
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+}
+
+.home-button:hover {
+ background-color: #800080; /* Darker purple for hover effect */
+}

ui/src/pages/stop-pending/stop-pending.test.tsx

@@ -0,0 +1,46 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { RecoilRoot } from 'recoil';
+import { StopPending } from './stop-pending';
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+});
+
+const componentWrapper = (
+ <RecoilRoot>
+ <QueryClientProvider client={queryClient}>
+ <BrowserRouter>
+ <StopPending />
+ </BrowserRouter>
+ </QueryClientProvider>
+ </RecoilRoot>
+);
+
+describe('StopPending', () => {
+ test('should render successfully', async () => {
+ const { baseElement } = render(componentWrapper);
+ expect(baseElement).toBeTruthy();
+ expect(
+ screen.getByText(/Thank you for your patience/i),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ /We are stopping your application, you may start it again when we have finished/i,
+ ),
+ ).toBeInTheDocument();
+ expect(screen.getByRole('progressbar')).toBeInTheDocument();
+ expect(
+ screen.getByText(/You may return to the Application Screen at any time/i),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: /Back To Home/i }),
+ ).toBeInTheDocument();
+ });
+});

ui/src/pages/stop-pending/stop-pending.tsx

@@ -0,0 +1,54 @@
+// src/pages/stop-pending/StopPending.tsx
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
+import { APP_BASE_URL } from '@src/utils/constants';
+import { navigateToUrl } from '@src/utils/jupyterhub';
+import React from 'react';
+import './stop-pending.css';
+
+export const StopPending = (): React.ReactElement => {
+ return (
+ <Box
+ id="stop-pending"
+ className="container"
+ display="flex"
+ flexDirection="column"
+ alignItems="center"
+ textAlign="center"
+ padding="20px"
+ >
+ <Box
+ display="flex"
+ flexDirection="column"
+ alignItems="center"
+ textAlign="center"
+ >
+ <Typography
+ variant="h5"
+ component="h1"
+ gutterBottom
+ sx={{ paddingBottom: '0 !important' }}
+ >
+ Thank you for your patience
+ <br />
+ We are stopping your application, you may start it again when we have
+ finished
+ </Typography>
+ <CircularProgress style={{ color: '#a020f0', margin: '20px 0' }} />
+ </Box>
+ <Box sx={{ marginTop: '4rem' }}>
+ <Typography variant="body1" gutterBottom>
+ You may return to the Application Screen at any time
+ </Typography>
+ <Button
+ id="back-btn"
+ variant="contained"
+ color="primary"
+ style={{ backgroundColor: '#a020f0' }}
+ onClick={() => navigateToUrl(`${APP_BASE_URL}`)}
+ >
+ Back To Home
+ </Button>
+ </Box>
+ </Box>
+ );
+};