plugin: Highlight Allocated state on GameServer detail view (#35)

Signed-off-by: ashwani yadav <22ashwaniyadav@gmail.com>

Author: NAME-ASHWANIYADAV

src/components/GameServerStatusBanner.test.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright Contributors to Agones a Series of LF Projects, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { GameServerStatusBanner } from './GameServerStatusBanner';
+
+describe('GameServerStatusBanner', () => {
+  describe('Allocated state', () => {
+    it('should render a banner for Allocated state', () => {
+      const element = React.createElement(GameServerStatusBanner, { state: 'Allocated' });
+      expect(element).toBeDefined();
+      expect(element.props.state).toBe('Allocated');
+      // Component should not return null for Allocated
+      expect(element.type).toBe(GameServerStatusBanner);
+    });
+  });
+
+  describe('Non-highlighted states', () => {
+    it.each(['Ready', 'Creating', 'Scheduled', 'Shutdown', 'Error', 'Unhealthy', ''])(
+      'should return null for "%s" state (no banner needed)',
+      state => {
+        const result = GameServerStatusBanner({ state });
+        expect(result).toBeNull();
+      }
+    );
+  });
+
+  describe('Edge cases', () => {
+    it('should handle "__proto__" safely without crashing', () => {
+      const result = GameServerStatusBanner({ state: '__proto__' });
+      expect(result).toBeNull();
+    });
+
+    it('should handle "constructor" safely without crashing', () => {
+      const result = GameServerStatusBanner({ state: 'constructor' });
+      expect(result).toBeNull();
+    });
+
+    it('should handle "toString" safely without crashing', () => {
+      const result = GameServerStatusBanner({ state: 'toString' });
+      expect(result).toBeNull();
+    });
+  });
+});

src/components/GameServerStatusBanner.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright Contributors to Agones a Series of LF Projects, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import React from 'react';
+
+/**
+ * Configuration for each state that should display a prominent banner
+ * on the GameServer detail view.
+ *
+ * @see {@link https://agones.dev/site/docs/reference/gameserver/#gameserver-state-diagram | Agones GameServer State Diagram}
+ */
+const STATE_BANNERS: Record<
+  string,
+  { severity: 'warning' | 'error' | 'info' | 'success'; title: string; message: string }
+> = {
+  Allocated: {
+    severity: 'warning',
+    title: 'Allocated — Active Game Session',
+    message:
+      'This GameServer has been allocated to a game session. ' +
+      'Players may be connected. Avoid deleting or modifying it while the session is active.',
+  },
+};
+
+interface GameServerStatusBannerProps {
+  state: string;
+}
+
+/**
+ * Renders a prominent status banner at the top of the GameServer detail view
+ * for states that need special attention (e.g., Allocated).
+ *
+ * Returns `null` for states that don't require a banner.
+ *
+ * @see {@link https://github.com/agones-dev/headlamp-plugin/issues/29 | Issue #29}
+ */
+export function GameServerStatusBanner({ state }: GameServerStatusBannerProps) {
+  const config = Object.prototype.hasOwnProperty.call(STATE_BANNERS, state)
+    ? STATE_BANNERS[state]
+    : null;
+
+  if (!config) {
+    return null;
+  }
+
+  return (
+    <Alert
+      severity={config.severity}
+      variant="standard"
+      sx={{
+        mb: 2,
+        '& .MuiAlert-icon': {
+          fontSize: '1.5rem',
+        },
+      }}
+    >
+      <AlertTitle sx={{ fontWeight: 600 }}>{config.title}</AlertTitle>
+      {config.message}
+    </Alert>
+  );
+}

src/views/gameservers/Detail.tsx

@@ -25,6 +25,8 @@ import TableRow from '@mui/material/TableRow';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { FleetLink } from '../../components/FleetLink';
+import { GameServerStatusBanner } from '../../components/GameServerStatusBanner';
+import { StateChip } from '../../components/StateChip';
 import { UtilBar } from '../../components/UtilBar';
 import { GameServer } from '../../resources/gameserver';
 
@@ -202,14 +204,15 @@ export function GameServerDetail() {
               '—'
             ),
           },
-          { name: 'State', value: item.state },
+          { name: 'State', value: <StateChip state={item.state} /> },
           { name: 'Address', value: item.address || '—' },
           { name: 'Ports', value: item.ports || '—' },
           { name: 'Node', value: item.nodeName || '—' },
         ]
       }
       extraSections={item =>
         item && [
+          <GameServerStatusBanner state={item.state} />,
           <PortsSection gameServer={item} />,
           <CountersListsSection gameServer={item} />,
           <ConfigurationSection gameServer={item} />,