From 42c4f3d48d54e6fb702f7475dccc3d52bda62083 Mon Sep 17 00:00:00 2001
From: Juntao Wang <37624318+DaoDaoNoCode@users.noreply.github.com>
Date: Thu, 26 Sep 2024 16:46:39 -0400
Subject: [PATCH] Fix layout issues on notebook controller (#3258)

---
 .../screens/admin/NotebookAdminControl.tsx    | 123 ++++++++++--------
 .../screens/server/SpawnerPage.tsx            |  10 ++
 2 files changed, 78 insertions(+), 55 deletions(-)

diff --git a/frontend/src/pages/notebookController/screens/admin/NotebookAdminControl.tsx b/frontend/src/pages/notebookController/screens/admin/NotebookAdminControl.tsx
index 643fb44b11..f3c66eca05 100644
--- a/frontend/src/pages/notebookController/screens/admin/NotebookAdminControl.tsx
+++ b/frontend/src/pages/notebookController/screens/admin/NotebookAdminControl.tsx
@@ -1,5 +1,14 @@
 import * as React from 'react';
-import { Alert, Stack, StackItem, Title } from '@patternfly/react-core';
+import {
+  Alert,
+  EmptyState,
+  EmptyStateHeader,
+  EmptyStateVariant,
+  Spinner,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
 import { Td, Tr } from '@patternfly/react-table';
 import { Table } from '~/components/table';
 import ExternalLink from '~/components/ExternalLink';
@@ -38,61 +47,65 @@ const NotebookAdminControl: React.FC = () => {
   );
 
   return (
-    <div className="odh-notebook-controller__page-content">
-      <ApplicationsPage
-        title="Administration"
-        description="Manage notebook servers."
-        provideChildrenPadding
-        loaded={loaded}
-        loadError={loadError}
-        empty={false}
-        headerAction={<StopAllServersButton users={users} />}
-      >
-        <Stack hasGutter>
-          <StackItem>
-            <Alert
-              title="Manage users in OpenShift"
-              component="h2"
-              isInline
-              data-testid="manage-users-alert"
-            >
-              Create, delete, and manage permissions for {ODH_PRODUCT_NAME} users in OpenShift.{' '}
-              <ExternalLink
-                text="Learn more about OpenShift user management"
-                to="https://access.redhat.com/documentation/en-us/red_hat_openshift_data_science/1/html/managing_users_and_user_resources/index"
-              />
-            </Alert>
-          </StackItem>
-          <StackItem>
-            <Title headingLevel="h2">Users</Title>
-          </StackItem>
-          <StackItem>
-            <Table
-              aria-label="Users table"
-              variant="compact"
-              data={users}
-              data-testid="administration-users-table"
-              enablePagination
-              columns={columns}
-              rowRenderer={(user) => (
-                <Tr key={user.name}>
-                  {columns.map((column) => (
-                    <Td
-                      key={column.field}
-                      dataLabel={column.field}
-                      isActionCell={column.field === 'actions'}
-                    >
-                      <UserTableCellTransform user={user} userProperty={column.field} />
-                    </Td>
-                  ))}
-                </Tr>
-              )}
+    <ApplicationsPage
+      title="Administration"
+      description="Manage notebook servers."
+      provideChildrenPadding
+      loaded={loaded}
+      loadingContent={
+        <EmptyState variant={EmptyStateVariant.lg} data-id="loading-empty-state">
+          <Spinner size="xl" />
+          <EmptyStateHeader titleText="Loading" headingLevel="h1" />
+        </EmptyState>
+      }
+      loadError={loadError}
+      empty={false}
+      headerAction={<StopAllServersButton users={users} />}
+    >
+      <Stack hasGutter>
+        <StackItem>
+          <Alert
+            title="Manage users in OpenShift"
+            component="h2"
+            isInline
+            data-testid="manage-users-alert"
+          >
+            Create, delete, and manage permissions for {ODH_PRODUCT_NAME} users in OpenShift.{' '}
+            <ExternalLink
+              text="Learn more about OpenShift user management"
+              to="https://access.redhat.com/documentation/en-us/red_hat_openshift_data_science/1/html/managing_users_and_user_resources/index"
             />
-          </StackItem>
-        </Stack>
-        <StopServerModal notebooksToStop={notebooksToStop} onNotebooksStop={onNotebooksStop} />
-      </ApplicationsPage>
-    </div>
+          </Alert>
+        </StackItem>
+        <StackItem>
+          <Title headingLevel="h2">Users</Title>
+        </StackItem>
+        <StackItem>
+          <Table
+            aria-label="Users table"
+            variant="compact"
+            data={users}
+            data-testid="administration-users-table"
+            enablePagination
+            columns={columns}
+            rowRenderer={(user) => (
+              <Tr key={user.name}>
+                {columns.map((column) => (
+                  <Td
+                    key={column.field}
+                    dataLabel={column.field}
+                    isActionCell={column.field === 'actions'}
+                  >
+                    <UserTableCellTransform user={user} userProperty={column.field} />
+                  </Td>
+                ))}
+              </Tr>
+            )}
+          />
+        </StackItem>
+      </Stack>
+      <StopServerModal notebooksToStop={notebooksToStop} onNotebooksStop={onNotebooksStop} />
+    </ApplicationsPage>
   );
 };
 
diff --git a/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx b/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
index b88b1d43ef..3fdf0800a4 100644
--- a/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
+++ b/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
@@ -3,11 +3,15 @@ import {
   ActionGroup,
   Alert,
   Button,
+  EmptyState,
+  EmptyStateHeader,
+  EmptyStateVariant,
   Form,
   FormGroup,
   FormSection,
   Grid,
   GridItem,
+  Spinner,
 } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
 import { useNavigate } from 'react-router-dom';
@@ -305,6 +309,12 @@ const SpawnerPage: React.FC = () => {
         description="Select options for your notebook server."
         provideChildrenPadding
         loaded={loaded}
+        loadingContent={
+          <EmptyState variant={EmptyStateVariant.lg} data-id="loading-empty-state">
+            <Spinner size="xl" />
+            <EmptyStateHeader titleText="Loading" headingLevel="h1" />
+          </EmptyState>
+        }
         loadError={loadError}
         empty={images.length === 0}
       >