UI fixes based on feedback.

Author: brumi1024

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/src/app/app.css

@@ -12,6 +12,7 @@
 html,
 body {
   @apply bg-white dark:bg-gray-950;
+  overscroll-behavior: none;
 
   @media (prefers-color-scheme: dark) {
     color-scheme: dark;
@@ -112,7 +113,7 @@ body {
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.648 0.2 131.684);
+  --primary: oklch(0.52 0.18 131.684);
   --primary-foreground: oklch(0.986 0.031 120.757);
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
@@ -123,20 +124,20 @@ body {
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.405 0.101 131.063);
+  --ring: oklch(0.33 0.09 131.063);
   --chart-1: oklch(0.871 0.15 154.449);
   --chart-2: oklch(0.723 0.219 149.579);
   --chart-3: oklch(0.627 0.194 149.214);
   --chart-4: oklch(0.527 0.154 150.069);
   --chart-5: oklch(0.448 0.119 151.328);
   --sidebar: oklch(0.21 0.006 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.768 0.233 130.85);
+  --sidebar-primary: oklch(0.6 0.2 130.85);
   --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
   --sidebar-accent: oklch(0.274 0.006 286.033);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.405 0.101 131.063);
+  --sidebar-ring: oklch(0.33 0.09 131.063);
 }
 
 @layer base {

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/src/app/routes/layout.tsx

@@ -27,11 +27,9 @@ import { GlobalRefreshButton } from '~/components/elements/GlobalRefreshButton';
 import { DiagnosticsDialog } from '~/components/elements/DiagnosticsDialog';
 import { SidebarProvider, SidebarInset, SidebarTrigger } from '~/components/ui/sidebar';
 import { Badge } from '~/components/ui/badge';
+import { Button } from '~/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/components/ui/tooltip';
-import { ChevronRight, Lock } from 'lucide-react';
-import { LegacyModeDocumentation } from '~/features/queue-management/components/LegacyModeDocumentation';
-import { getMergedConfigData } from '~/utils/configUtils';
-import { SPECIAL_VALUES } from '~/types';
+import { Lock, GitCompareArrows } from 'lucide-react';
 import { SearchBar } from '~/components/search/SearchBar';
 import { useKeyboardShortcuts } from '~/hooks/useKeyboardShortcuts';
 import { toast } from 'sonner';
@@ -41,19 +39,16 @@ export default function Layout() {
   const [stagedChangesPanelOpen, setStagedChangesPanelOpen] = useState(false);
   const [isApplying, setIsApplying] = useState(false);
   const loadInitialData = useSchedulerStore((state) => state.loadInitialData);
-  const configData = useSchedulerStore((state) => state.configData);
   const stagedChanges = useSchedulerStore((state) => state.stagedChanges);
   const setSearchContext = useSchedulerStore((state) => state.setSearchContext);
   const isReadOnly = useSchedulerStore((state) => state.isReadOnly);
   const applyChanges = useSchedulerStore((state) => state.applyChanges);
   const clearAllChanges = useSchedulerStore((state) => state.clearAllChanges);
   const isPropertyPanelOpen = useSchedulerStore((state) => state.isPropertyPanelOpen);
+  const isComparisonModeActive = useSchedulerStore((state) => state.isComparisonModeActive);
+  const toggleComparisonMode = useSchedulerStore((state) => state.toggleComparisonMode);
   const location = useLocation();
 
-  // Get legacy mode status considering staged changes
-  const mergedData = getMergedConfigData(configData, stagedChanges);
-  const legacyModeEnabled = mergedData.get(SPECIAL_VALUES.LEGACY_MODE_PROPERTY) !== 'false';
-
   useEffect(() => {
     loadInitialData().catch((err) => {
       console.error('Failed to load initial data:', err);
@@ -183,21 +178,7 @@ export default function Layout() {
             <header className="flex h-16 items-center gap-4 border-b px-6">
               <SidebarTrigger />
               <div className="flex-1">
-                <div className="flex items-center gap-2">
-                  <h1 className="text-xl font-semibold">{pageInfo.title}</h1>
-                  {location.pathname === '/' && (
-                    <LegacyModeDocumentation legacyModeEnabled={legacyModeEnabled}>
-                      <Badge
-                        variant={legacyModeEnabled ? 'warning' : 'success'}
-                        className="cursor-pointer hover:opacity-80 hover:scale-105 transition-all duration-200 animate-pulse"
-                        style={{ animationIterationCount: '3' }}
-                      >
-                        {legacyModeEnabled ? 'Legacy Mode' : 'Flexible Mode'}
-                        <ChevronRight className="h-3 w-3 ml-1" />
-                      </Badge>
-                    </LegacyModeDocumentation>
-                  )}
-                </div>
+                <h1 className="text-xl font-semibold">{pageInfo.title}</h1>
                 <p className="text-sm text-muted-foreground">{pageInfo.description}</p>
               </div>
               <SearchBar className="w-64" placeholder="Search" />
@@ -217,6 +198,27 @@ export default function Layout() {
                 </TooltipProvider>
               )}
               <GlobalRefreshButton />
+              {location.pathname === '/' && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant={isComparisonModeActive ? 'default' : 'ghost'}
+                        size="icon"
+                        onClick={toggleComparisonMode}
+                        aria-label={
+                          isComparisonModeActive ? 'Exit comparison mode' : 'Enter comparison mode'
+                        }
+                      >
+                        <GitCompareArrows className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{isComparisonModeActive ? 'Exit comparison mode' : 'Compare queues'}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
               <DiagnosticsDialog />
               <ModeToggle />
             </header>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/src/config/__tests__/propertyDefinitions.test.ts

@@ -238,6 +238,128 @@ describe('propertyDefinitions', () => {
       }
     });
 
+    it('disables legacy auto-creation for queues with children', () => {
+      const legacyAutoCreate = queuePropertyDefinitions.find(
+        (p) => p.name === 'auto-create-child-queue.enabled',
+      );
+
+      expect(legacyAutoCreate).toBeDefined();
+      if (!legacyAutoCreate) {
+        return;
+      }
+
+      expect(Array.isArray(legacyAutoCreate.enableWhen)).toBe(true);
+      const enableCondition = legacyAutoCreate.enableWhen?.[0];
+      expect(enableCondition).toBeInstanceOf(Function);
+
+      if (enableCondition) {
+        // Test parent queue with children - should be disabled
+        const parentWithChildrenOptions = {
+          ...createConditionOptions({
+            property: legacyAutoCreate,
+            capacity: '50',
+            values: { 'auto-create-child-queue.enabled': 'false' },
+          }),
+          queuePath: 'root.parent',
+          queueInfo: {
+            queueType: 'parent' as const,
+            queueName: 'parent',
+            queuePath: 'root.parent',
+            capacity: 50,
+            usedCapacity: 0,
+            maxCapacity: 100,
+            absoluteCapacity: 50,
+            absoluteMaxCapacity: 100,
+            absoluteUsedCapacity: 0,
+            numApplications: 0,
+            numActiveApplications: 0,
+            numPendingApplications: 0,
+            state: 'RUNNING' as const,
+            queues: {
+              queue: [
+                {
+                  queueType: 'leaf' as const,
+                  queueName: 'child1',
+                  queuePath: 'root.parent.child1',
+                  capacity: 50,
+                  usedCapacity: 0,
+                  maxCapacity: 100,
+                  absoluteCapacity: 25,
+                  absoluteMaxCapacity: 100,
+                  absoluteUsedCapacity: 0,
+                  numApplications: 0,
+                  numActiveApplications: 0,
+                  numPendingApplications: 0,
+                  state: 'RUNNING' as const,
+                },
+              ],
+            },
+          },
+        };
+        expect(enableCondition(parentWithChildrenOptions)).toBe(false);
+
+        // Test parent queue without children - should be enabled
+        const parentNoChildrenOptions = {
+          ...createConditionOptions({
+            property: legacyAutoCreate,
+            capacity: '50',
+            values: { 'auto-create-child-queue.enabled': 'false' },
+          }),
+          queuePath: 'root.parent',
+          queueInfo: {
+            queueType: 'parent' as const,
+            queueName: 'parent',
+            queuePath: 'root.parent',
+            capacity: 50,
+            usedCapacity: 0,
+            maxCapacity: 100,
+            absoluteCapacity: 50,
+            absoluteMaxCapacity: 100,
+            absoluteUsedCapacity: 0,
+            numApplications: 0,
+            numActiveApplications: 0,
+            numPendingApplications: 0,
+            state: 'RUNNING' as const,
+            queues: {
+              queue: [],
+            },
+          },
+        };
+        expect(enableCondition(parentNoChildrenOptions)).toBe(true);
+
+        // Test with null queueInfo - should be enabled (default behavior)
+        const nullQueueInfoOptions = createConditionOptions({
+          property: legacyAutoCreate,
+          capacity: '50',
+        });
+        expect(enableCondition(nullQueueInfoOptions)).toBe(true);
+
+        // Test with undefined queues property - should be enabled
+        const undefinedQueuesOptions = {
+          ...createConditionOptions({
+            property: legacyAutoCreate,
+            capacity: '50',
+          }),
+          queueInfo: {
+            queueType: 'parent' as const,
+            queueName: 'parent',
+            queuePath: 'root.parent',
+            capacity: 50,
+            usedCapacity: 0,
+            maxCapacity: 100,
+            absoluteCapacity: 50,
+            absoluteMaxCapacity: 100,
+            absoluteUsedCapacity: 0,
+            numApplications: 0,
+            numActiveApplications: 0,
+            numPendingApplications: 0,
+            state: 'RUNNING' as const,
+          },
+        };
+        expect(enableCondition(undefinedQueuesOptions)).toBe(true);
+      }
+    });
+
     it('enables flexible auto-creation based on root queue children capacity mode', () => {
       const flexibleAutoCreate = queuePropertyDefinitions.find(
         (p) => p.name === 'auto-queue-creation-v2.enabled',

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/src/config/properties/queue-properties.ts

@@ -508,6 +508,12 @@ export const queuePropertyDefinitions: PropertyDescriptor[] = [
     defaultValue: '',
     required: false,
     showWhen: [shouldShowLegacyAutoCreation],
+    enableWhen: [
+      ({ queueInfo }) => {
+        // Disable if queue has children
+        return !queueInfo?.queues?.queue || queueInfo.queues.queue.length === 0;
+      },
+    ],
   },
   {
     name: 'auto-queue-creation-v2.enabled',

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/src/features/global-settings/components/LegacyModeToggle.tsx

@@ -25,6 +25,7 @@ import { HighlightedText } from '~/components/search/HighlightedText';
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -265,15 +266,12 @@ export const LegacyModeToggle: React.FC<LegacyModeToggleProps> = ({
             <DialogContent className="max-w-2xl max-h-[80vh]">
               <DialogHeader>
                 <DialogTitle>Validation Preview</DialogTitle>
+                <DialogDescription>
+                  Changes that would occur when switching to{' '}
+                  {currentEnabled ? 'Flexible' : 'Legacy'} Mode
+                </DialogDescription>
               </DialogHeader>
               <div className="space-y-3 overflow-y-auto max-h-[calc(80vh-8rem)]">
-                <div>
-                  <p className="text-xs text-muted-foreground mt-1">
-                    Changes that would occur when switching to{' '}
-                    {currentEnabled ? 'Flexible' : 'Legacy'} Mode
-                  </p>
-                </div>
-
                 {validationPreview.affectedQueues === 0 ? (
                   <p className="text-sm text-muted-foreground py-2">
                     No validation changes would occur.

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/src/features/property-editor/components/PropertyFormField.test.tsx

@@ -224,7 +224,7 @@ describe('PropertyFormField', () => {
       </FormWrapper>,
     );
 
-    expect(screen.getByText('Capacity Editor')).toBeInTheDocument();
+    expect(screen.getByText('Edit Capacity')).toBeInTheDocument();
     expect(screen.queryByText('This is the capacity description')).not.toBeInTheDocument();
   });
 

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/src/features/property-editor/components/PropertyFormField.tsx

@@ -523,7 +523,7 @@ export const PropertyFormField: React.FC<PropertyFormFieldProps> = ({
                       onClick={handleOpenCapacityEditor}
                       disabled={!parentQueuePath || !isEnabled}
                     >
-                      Capacity Editor
+                      Edit Capacity
                     </Button>
                   ) : (
                     <span className="text-xs text-muted-foreground">