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/__snapshots__/stop-pending.test.tsx.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StopPending matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="container MuiBox-root css-115nrsw"
+    id="stop-pending"
+  >
+    <div
+      class="MuiBox-root css-gdx2i7"
+    >
+      <h1
+        class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom css-1wm0rzi-MuiTypography-root"
+      >
+        Thank you for your patience
+        <br />
+        We are stopping your application, you may start it again when we have finished
+      </h1>
+      <span
+        class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-18lrjg1-MuiCircularProgress-root"
+        role="progressbar"
+        style="width: 40px; height: 40px; color: rgb(160, 32, 240); margin: 20px 0px;"
+      >
+        <svg
+          class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate css-176wh8e-MuiCircularProgress-circle"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="MuiBox-root css-f3bpqo"
+    >
+      <p
+        class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-1orliad-MuiTypography-root"
+      >
+        You may return to the Application Screen at any time
+      </p>
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-25zfvl-MuiButtonBase-root-MuiButton-root"
+        id="back-btn"
+        style="background-color: rgb(160, 32, 240);"
+        tabindex="0"
+        type="button"
+      >
+        Back To Home
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,39 @@
+Copy code
+/* src/pages/stop-pending/StopPending.css */
+#stop-pending.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    font-family: Arial, sans-serif;
+    padding-top: 50px; 
+}
+
+.spinner {
+  margin: 20px 0;
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-top: 4px solid #a020f0; /* Purple color for the spinner */
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.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,52 @@
+// src/pages/stop-pending/StopPending.test.tsx
+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();
+  });
+
+  test('matches snapshot', () => {
+    const { asFragment } = render(componentWrapper);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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>
+  );
+};