Changes to integrate rate-limit headers for Commands left component…

… UI (#67)

apps/playground-web/components/Playground/TerminalUI.tsx

@@ -6,9 +6,10 @@ import { useState } from 'react';
 import Tooltip from '../Overlays/Tooltip';
 export function TerminalUI({ initialCommandsLeft = 1000 }) {
   const [commandsLeft, setCommandsLeft] = useState(initialCommandsLeft);
-  const decreaseCommandsLeft = () => {
-    setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0));
+  const handleCommandExecuted = (commands: number) => {
+    setCommandsLeft(commands);
   };
+
   return (
     <>
       <div className="bg-gray-900 rounded-lg" data-testid="terminal-container">
@@ -23,7 +24,7 @@ export function TerminalUI({ initialCommandsLeft = 1000 }) {
           className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md"
           data-testid="shell-container"
         >
-          <Shell decreaseCommandsLeft={decreaseCommandsLeft} />
+          <Shell onCommandExecuted={handleCommandExecuted} />
         </div>
       </div>
       <TerminalCounter commandsLeft={commandsLeft} />

apps/playground-web/components/Playground/__tests__/TerminalUI.test.tsx

@@ -4,17 +4,16 @@ import userEvent from '@testing-library/user-event';
 import { TerminalUI } from '../TerminalUI';
 import { formatTime } from '@/shared/utils/commonUtils';
 
+// Shared variable to store initialCommandsLeft
+let sharedInitialCommandsLeft = 1000;
+
 jest.mock('@/shared/hooks/useTimer', () => ({
   useTimer: jest.fn(() => ({ timeLeft: 15 * 60 })), // Mock 15 minutes
 }));
 
-jest.mock('@/shared/utils/commonUtils', () => ({
-  formatTime: jest.fn(
-    (seconds) => `${Math.floor(seconds / 60)}:${seconds % 60}`,
-  ),
-}));
-
 const setupTest = (initialCommandsLeft = 1000) => {
+  sharedInitialCommandsLeft = initialCommandsLeft;
+
   const user = userEvent.setup();
   const utils = render(
     <TerminalUI initialCommandsLeft={initialCommandsLeft} />,
@@ -39,6 +38,21 @@ const setupTest = (initialCommandsLeft = 1000) => {
   };
 };
 
+jest.mock('@/shared/utils/commonUtils', () => ({
+  formatTime: jest.fn(
+    (seconds) => `${Math.floor(seconds / 60)}:${seconds % 60}`,
+  ),
+  handleResult: jest.fn(
+    ({ result, newOutput, setOutput, onCommandExecuted }) => {
+      const mockData = result?.body?.data ? result.body.data : 'mock error';
+      setOutput([newOutput, mockData]);
+
+      const commandsLeft = Math.max(0, sharedInitialCommandsLeft - 1);
+      onCommandExecuted(commandsLeft);
+    },
+  ),
+}));
+
 describe('TerminalUI Component', () => {
   it('renders TerminalUI', () => {
     const { terminalContainer, diceIcons, shellContainer, cliInputElement } =

apps/playground-web/components/Shell/Shell.tsx

@@ -5,18 +5,18 @@
 import { useShell } from './hooks/useShell';
 
 interface ShellProps {
-  decreaseCommandsLeft: () => void;
+  onCommandExecuted: (commandsLeft: number) => void;
 }
 
-export default function Shell({ decreaseCommandsLeft }: ShellProps) {
+export default function Shell({ onCommandExecuted }: ShellProps) {
   const {
     handleInputChange,
     handleKeyDown,
     terminalRef,
     inputRef,
     output,
     command,
-  } = useShell(decreaseCommandsLeft);
+  } = useShell(onCommandExecuted);
   return (
     <div
       ref={terminalRef}

apps/playground-web/components/Shell/__tests__/index.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Shell from '../Shell';
 
-const decreaseCommandsLeftMock = jest.fn();
+const onCommandExecutedMock = jest.fn();
 
 const dummyCommands = [
   'set abc 100',
@@ -16,9 +16,7 @@ const dummyCommands = [
 
 const setupTest = () => {
   const user = userEvent.setup();
-  const utils = render(
-    <Shell decreaseCommandsLeft={decreaseCommandsLeftMock} />,
-  );
+  const utils = render(<Shell onCommandExecuted={onCommandExecutedMock} />);
 
   const terminalElement = screen.getByTestId('terminal');
   const cliInputElement = screen.getByTestId<HTMLInputElement>('shell-input');