added admin confirmation popup and fixed server page styling (#60)

bcgov · Jan 25, 2024 · 7384385 · 7384385
1 parent 7cd554f
commit 7384385
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 43 deletions.
diff --git a/src/dashboard/src/app/client/servers/page.tsx b/src/dashboard/src/app/client/servers/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AllocationTable, Col } from '@/components';
+import { AllocationTable } from '@/components';
 import { useAuth } from '@/hooks';
 import { useOperatingSystemItems, useServerItems } from '@/hooks/data';
 import { useDashboard, useFiltered } from '@/store';
@@ -25,22 +25,20 @@ export default function Page() {
   if (!state.isClient) redirect('/');
 
   return (
-    <Col>
-      <h1>All Servers</h1>
-      <AllocationTable
-        serverItems={serverItems}
-        loading={!isReadyOperatingSystemItems && !isReadyServerItems}
-        onClick={(serverItem) => {
-          if (serverItem) {
-            setFilteredTenant();
-            setFilteredOrganization();
-            setFilteredOperatingSystemItem();
-            setFilteredServerItem(serverItem);
-            setDashboardServerItems([serverItem]);
-            router.push(`/client/dashboard?serverItem=${serverItem?.serviceNowKey}`);
-          }
-        }}
-      />
-    </Col>
+    <AllocationTable
+      margin={-75}
+      serverItems={serverItems}
+      loading={!isReadyOperatingSystemItems && !isReadyServerItems}
+      onClick={(serverItem) => {
+        if (serverItem) {
+          setFilteredTenant();
+          setFilteredOrganization();
+          setFilteredOperatingSystemItem();
+          setFilteredServerItem(serverItem);
+          setDashboardServerItems([serverItem]);
+          router.push(`/client/dashboard?serverItem=${serverItem?.serviceNowKey}`);
+        }
+      }}
+    />
   );
 }
diff --git a/src/dashboard/src/app/hsb/admin/users/page.tsx b/src/dashboard/src/app/hsb/admin/users/page.tsx
@@ -12,6 +12,7 @@ import {
   Spinner,
   Table,
   Text,
+  ConfirmPopup,
 } from '@/components';
 import { IUserModel, useAuth } from '@/hooks';
 import { useApiUsers } from '@/hooks/api/admin';
@@ -34,6 +35,7 @@ export default function Page() {
   const dialogRef = useRef<HTMLDialogElement>(null);
   const [currentUsername, setCurrentUsername] = React.useState('');
   const [currentEditContext, setCurrentEditContext] = React.useState('');
+  const [showPopup, setShowPopup] = React.useState(false);
 
   const handleEditClick = (username: string, context: string) => {
     setCurrentUsername(username);
@@ -48,7 +50,7 @@ export default function Page() {
       dialogRef.current.close();
     }
   };
-
+  
   React.useEffect(() => {
     setLoading(!isReadyUsers && !isReadyGroups);
   }, [isReadyUsers, isReadyGroups]);
@@ -105,6 +107,14 @@ export default function Page() {
   return (
 
     <Sheet>
+      {showPopup && (
+        <ConfirmPopup
+          onCancel={() => setShowPopup(false)}
+          onConfirm={() => {
+            setShowPopup(false);
+          }}
+        />
+      )}
       <dialog ref={dialogRef} className={styles.popup}>
         <p className={styles.popupTitle}>{currentEditContext} for {currentUsername}</p>
         <div className={styles.popupSearch}>

diff --git a/src/dashboard/src/app/hsb/servers/page.tsx b/src/dashboard/src/app/hsb/servers/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AllocationTable, Col } from '@/components';
+import { AllocationTable } from '@/components';
 import { useAuth } from '@/hooks';
 import { useServerItems } from '@/hooks/data';
 import { useDashboard, useFiltered } from '@/store';
@@ -21,22 +21,20 @@ export default function Page() {
   if (!state.isHSB) redirect('/');
 
   return (
-    <Col>
-      <h1>All Servers</h1>
-      <AllocationTable
-        serverItems={serverItems}
-        loading={!isReady}
-        onClick={(serverItem) => {
-          if (serverItem) {
-            setFilteredTenant();
-            setFilteredOrganization();
-            setFilteredOperatingSystemItem();
-            setFilteredServerItem(serverItem);
-            setDashboardServerItems([serverItem]);
-            router.push(`/hsb/dashboard?serverItem=${serverItem?.serviceNowKey}`);
-          }
-        }}
-      />
-    </Col>
+    <AllocationTable
+      margin={-75}
+      serverItems={serverItems}
+      loading={!isReady}
+      onClick={(serverItem) => {
+        if (serverItem) {
+          setFilteredTenant();
+          setFilteredOrganization();
+          setFilteredOperatingSystemItem();
+          setFilteredServerItem(serverItem);
+          setDashboardServerItems([serverItem]);
+          router.push(`/hsb/dashboard?serverItem=${serverItem?.serviceNowKey}`);
+        }
+      }}
+    />
   );
 }
diff --git a/src/dashboard/src/components/charts/allocationTable/AllocationTable.module.scss b/src/dashboard/src/components/charts/allocationTable/AllocationTable.module.scss
@@ -121,6 +121,10 @@
     padding: 13px 0;
     position: relative;
     border-bottom: 1px solid $medium-gray;
+
+    &:hover {
+        background-color: $light-gray;
+    }
 }
 
 .info,
@@ -205,12 +209,16 @@
         p {
             width: 20%;
 
+            &.centered {
+                text-align: center;
+            }
+
             &:first-of-type {
                 width: 21%;
             }
 
             &:last-child {
-                width: unset;
+                width: 15%;
             }
         }
     }

diff --git a/src/dashboard/src/components/charts/allocationTable/AllocationTable.tsx b/src/dashboard/src/components/charts/allocationTable/AllocationTable.tsx
@@ -19,13 +19,15 @@ export interface IAllocationTableProps {
   serverItems: IServerItemModel[];
   loading?: boolean;
   onClick?: (serverItem?: IServerItemModel) => void;
+  margin?: number;
 }
 
 export const AllocationTable = ({
   operatingSystem,
   serverItems,
   loading,
   onClick,
+  margin,
 }: IAllocationTableProps) => {
   const getServerItems = useAllocationByOS(operatingSystem);
 
@@ -60,7 +62,7 @@ export const AllocationTable = ({
   );
 
   return (
-    <div className={styles.panel}>
+    <div className={styles.panel} style={margin ? { marginTop: margin } : {}}>
       <h1>
         {operatingSystem
           ? `Allocation by Storage Volume - All ${getLabel(operatingSystem)}`

diff --git a/src/dashboard/src/components/charts/allocationTable/TableRow.tsx b/src/dashboard/src/components/charts/allocationTable/TableRow.tsx
@@ -39,8 +39,8 @@ export const TableRow: React.FC<TableRowProps> = ({
         </p>
         {showTenant ? <p title={tenant}>{tenant}</p> : ''}
         <p title={os}>{os}</p>
-        <p title={capacityValue}>{capacityValue}</p>
-        <p title={availableValue}>{availableValue}</p>
+        <p className={styles.centered} title={capacityValue}>{capacityValue}</p>
+        <p className={styles.centered} title={availableValue}>{availableValue}</p>
       </div>
       <div className={styles.barChart}>
         <div className={styles.bar}>

diff --git a/src/dashboard/src/components/confirmPopup/ConfirmPopup.module.scss b/src/dashboard/src/components/confirmPopup/ConfirmPopup.module.scss
@@ -0,0 +1,50 @@
+@import '@/styles/utils.scss';
+
+.popupConfirm {
+    width: 100%;
+    max-width: 450px;
+    min-height: 170px;
+    border: 0;
+    border-radius: 10px;
+    @include dropshadow;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 1;
+    position: fixed;
+}
+
+.popupTitle {
+    font-weight: bold;
+    text-align: center;
+    font-size: $font-size-20;
+}
+
+.popupContent {
+    text-align: center;
+    line-height: 1.8;
+}
+
+.popupFooter {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+
+    button {
+        width: 200px;
+        padding: 8px;
+    }
+}
+
+.backdrop {
+    content: '';
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: $bc-black;
+    opacity: 0.4;
+    z-index: 1;
+}
diff --git a/src/dashboard/src/components/confirmPopup/ConfirmPopup.tsx b/src/dashboard/src/components/confirmPopup/ConfirmPopup.tsx
@@ -0,0 +1,24 @@
+import styles from './ConfirmPopup.module.scss';
+import { Button } from '@/components/buttons';
+
+export interface PopupProps {
+    onCancel: () => void;
+    onConfirm: () => void;
+  }
+
+export const ConfirmPopup: React.FC<PopupProps> = ({ onCancel, onConfirm }) => {
+    return (
+        <>
+            <span className={styles.backdrop}></span>
+            <dialog className={styles.popupConfirm}>
+                <p className={styles.popupTitle}>Confirm Navigation</p>
+                <p className={styles.popupContent}>You have unsaved changes.<br/>Are you sure you want to navigate away?</p>
+                <div className={styles.popupFooter}>
+                    <Button variant="secondary" onClick={onConfirm}>Leave this page</Button>
+                    <Button onClick={onCancel}>Stay on this page</Button>
+                </div>
+            </dialog>
+        </>
+    )
+};
+
diff --git a/src/dashboard/src/components/confirmPopup/index.ts b/src/dashboard/src/components/confirmPopup/index.ts
@@ -0,0 +1 @@
+export * from './ConfirmPopup';
diff --git a/src/dashboard/src/components/header/Header.tsx b/src/dashboard/src/components/header/Header.tsx
@@ -39,8 +39,8 @@ export const Header: React.FC = () => {
   return (
     <>
       <header
-        className={`${style.header} ${(isDashboardView || isServerView) && style.filterPadding} ${
-          isAdminView && style.adminPadding
+        className={`${style.header} ${isDashboardView ? style.filterPadding : ''} ${
+          (isAdminView || isServerView) ? style.adminPadding : ''
         }`}
       >
         <div className={style.container}>

diff --git a/src/dashboard/src/components/index.ts b/src/dashboard/src/components/index.ts
@@ -14,3 +14,4 @@ export * from './overlay';
 export * from './sheet';
 export * from './spinner';
 export * from './table';
+export * from './confirmPopup';