Review coments: re-use and fix styles, and naming

Co-authored-by: Filip Troníček <[email protected]>

Author: geropl

components/dashboard/src/data/maintenande-mode/maintenance-mode-mutation.ts renamed to components/dashboard/src/data/maintenance-mode/maintenance-mode-mutation.ts

@@ -14,6 +14,7 @@ import { SpinnerLoader } from "../components/Loader";
 import { RunningWorkspacesCard } from "./RunningWorkspacesCard";
 import { MaintenanceModeCard } from "./MaintenanceModeCard";
 import { MaintenanceNotificationCard } from "./MaintenanceNotificationCard";
+import { Heading2 } from "@podkit/typography/Headings";
 
 const AdminPage: React.FC = () => {
     const history = useHistory();
@@ -33,8 +34,8 @@ const AdminPage: React.FC = () => {
     return (
         <div className="flex flex-col w-full">
             <Header title="Organization Administration" subtitle="Manage Infrastructure Rollouts." />
-            <div className="app-container py-6">
-                <h2 className="text-2xl font-semibold text-pk-content-primary mb-4">Infrastructure Rollout</h2>
+            <div className="app-container py-6 flex flex-col gap-4">
+                <Heading2>Infrastructure Rollout</Heading2>
 
                 {userLoading ||
                     orgLoading ||

components/dashboard/src/data/maintenande-mode/maintenance-mode-query.ts renamed to components/dashboard/src/data/maintenance-mode/maintenance-mode-query.ts

@@ -6,7 +6,7 @@
 
 import { FC } from "react";
 import Alert from "../components/Alert";
-import { useMaintenanceMode } from "../data/maintenande-mode/maintenance-mode-query";
+import { useMaintenanceMode } from "../data/maintenance-mode/maintenance-mode-query";
 
 export const MaintenanceModeBanner: FC = () => {
     const { isMaintenanceMode } = useMaintenanceMode();

components/dashboard/src/data/maintenande-mode/maintenance-notification-mutation.ts renamed to components/dashboard/src/data/maintenance-mode/maintenance-notification-mutation.ts

@@ -7,8 +7,8 @@
 import { FC } from "react";
 import { useToast } from "../components/toasts/Toasts";
 import { Button } from "@podkit/buttons/Button";
-import { useMaintenanceMode } from "../data/maintenande-mode/maintenance-mode-query";
-import { useSetMaintenanceModeMutation } from "../data/maintenande-mode/maintenance-mode-mutation";
+import { useMaintenanceMode } from "../data/maintenance-mode/maintenance-mode-query";
+import { useSetMaintenanceModeMutation } from "../data/maintenance-mode/maintenance-mode-mutation";
 import { ConfigurationSettingsField } from "../repositories/detail/ConfigurationSettingsField";
 import { Heading3 } from "@podkit/typography/Headings";
 
@@ -37,7 +37,7 @@ export const MaintenanceModeCard: FC = () => {
             <div className="flex justify-between items-center">
                 <div>
                     <Heading3>Maintenance Mode</Heading3>
-                    <p className="textpk-content-tertiary">
+                    <p className="text-pk-content-tertiary">
                         When enabled, users cannot start new workspaces and a notification is displayed.
                     </p>
                 </div>

components/dashboard/src/data/maintenande-mode/maintenance-notification-query.ts renamed to components/dashboard/src/data/maintenance-mode/maintenance-notification-query.ts

@@ -6,16 +6,16 @@
 
 import { FC } from "react";
 import Alert from "../components/Alert";
-import { useMaintenanceNotification } from "../data/maintenande-mode/maintenance-notification-query";
-import { useMaintenanceMode } from "../data/maintenande-mode/maintenance-mode-query";
+import { useMaintenanceNotification } from "../data/maintenance-mode/maintenance-notification-query";
+import { useMaintenanceMode } from "../data/maintenance-mode/maintenance-mode-query";
 import { DEFAULT_MESSAGE } from "./MaintenanceNotificationCard";
 
 export const MaintenanceNotificationBanner: FC = () => {
     const { isNotificationEnabled, notificationMessage } = useMaintenanceNotification();
     const { isMaintenanceMode } = useMaintenanceMode();
 
-    // As per requirement R4.5, if both maintenance mode and scheduled notification
-    // are enabled, only show the maintenance mode notification
+    // if both maintenance mode and scheduled notification are enabled,
+    // only show the maintenance mode notification
     if (isMaintenanceMode || !isNotificationEnabled) {
         return null;
     }

components/dashboard/src/org-admin/AdminPage.tsx

@@ -7,8 +7,8 @@
 import { FC, useState, useEffect } from "react";
 import { useToast } from "../components/toasts/Toasts";
 import { Button } from "@podkit/buttons/Button";
-import { useMaintenanceNotification } from "../data/maintenande-mode/maintenance-notification-query";
-import { useSetMaintenanceNotificationMutation } from "../data/maintenande-mode/maintenance-notification-mutation";
+import { useMaintenanceNotification } from "../data/maintenance-mode/maintenance-notification-query";
+import { useSetMaintenanceNotificationMutation } from "../data/maintenance-mode/maintenance-notification-mutation";
 import Alert from "../components/Alert";
 import { ConfigurationSettingsField } from "../repositories/detail/ConfigurationSettingsField";
 import { Heading3 } from "@podkit/typography/Headings";
@@ -89,7 +89,7 @@ export const MaintenanceNotificationCard: FC = () => {
             <div className="mt-4">
                 <label
                     htmlFor="maintenance-message"
-                    className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                    className="block text-sm font-medium text-pk-content-secondary mb-2"
                 >
                     Notification Message
                 </label>
@@ -118,7 +118,7 @@ export const MaintenanceNotificationCard: FC = () => {
                     </div>
                 ) : (
                     <div>
-                        <div className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 min-h-[4rem]">
+                        <div className="px-3 py-2 border border-pk-border-base rounded-md bg-pk-surface-secondary text-pk-content-secondary min-h-[4rem]">
                             {message}
                         </div>
                         <div className="mt-2 flex justify-end">
@@ -131,11 +131,11 @@ export const MaintenanceNotificationCard: FC = () => {
             </div>
 
             <div className="mt-4">
-                <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Preview</label>
+                <label className="block text-sm font-semibold text-pk-content-secondary mb-2">Preview</label>
                 <Alert type="warning" className="mb-0">
-                    <div className="flex items-center">
+                    <div className="flex items-center flex-wrap gap-2">
                         <span className="font-semibold">Scheduled Maintenance:</span>
-                        <span className="ml-2">{message}</span>
+                        <span>{message}</span>
                     </div>
                 </Alert>
             </div>

components/dashboard/src/org-admin/MaintenanceModeBanner.tsx

@@ -12,7 +12,7 @@ import { useWorkspaceSessions } from "../data/insights/list-workspace-sessions-q
 import { Button } from "@podkit/buttons/Button";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { useToast } from "../components/toasts/Toasts";
-import { useMaintenanceMode } from "../data/maintenande-mode/maintenance-mode-query";
+import { useMaintenanceMode } from "../data/maintenance-mode/maintenance-mode-query";
 import { Item, ItemField, ItemsList } from "../components/ItemsList";
 import Alert from "../components/Alert";
 import Spinner from "../icons/Spinner.svg";
@@ -24,13 +24,11 @@ import { ConfigurationSettingsField } from "../repositories/detail/Configuration
 import { Heading3 } from "../components/typography/headings";
 import Tooltip from "../components/Tooltip";
 
-interface RunningWorkspacesCardProps {}
-
 const isWorkspaceNotStopped = (session: WorkspaceSession): boolean => {
     return session.workspace?.status?.phase?.name !== WorkspacePhase_Phase.STOPPED;
 };
 
-export const RunningWorkspacesCard: FC<RunningWorkspacesCardProps> = () => {
+export const RunningWorkspacesCard: FC<{}> = () => {
     const lookbackHours = 48;
     const [isStopAllModalOpen, setIsStopAllModalOpen] = useState(false);
     const [isStoppingAll, setIsStoppingAll] = useState(false);
@@ -202,7 +200,7 @@ export const RunningWorkspacesCard: FC<RunningWorkspacesCardProps> = () => {
                 buttonType="destructive"
                 buttonDisabled={isStoppingAll}
             >
-                <p className="text-sm text-gray-600 dark:text-gray-300">
+                <p className="text-sm text-pk-content-secondary">
                     Are you sure you want to stop all {runningWorkspaces.length} currently running workspaces in this
                     organization? Workspaces will be backed up before stopping. This action cannot be undone.
                 </p>