React UI: Starting Screen Progress Bar Should Start at 0 (#8908)

* Removed min value

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Added tests

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Set min value

Signed-off-by: Levi Harrison <git@leviharrison.dev>

web/ui/react-app/src/pages/starting/Starting.test.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { WALReplayData } from '../../types/types';
+import { StartingContent } from './Starting';
+import { Progress } from 'reactstrap';
+
+describe('Starting', () => {
+  describe('progress bar', () => {
+    it('does not show when replay not started', () => {
+      const status: WALReplayData = {
+        min: 0,
+        max: 0,
+        current: 0,
+      };
+      const starting = shallow(<StartingContent status={status} isUnexpected={false} />);
+      const progress = starting.find(Progress);
+      expect(progress).toHaveLength(0);
+    });
+
+    it('renders progress correctly', () => {
+      const status: WALReplayData = {
+        min: 0,
+        max: 20,
+        current: 1,
+      };
+      const starting = shallow(<StartingContent status={status} isUnexpected={false} />);
+      const progress = starting.find(Progress);
+      expect(progress.prop('value')).toBe(2);
+      expect(progress.prop('min')).toBe(0);
+      expect(progress.prop('max')).toBe(21);
+    });
+
+    it('shows done when replay done', () => {
+      const status: WALReplayData = {
+        min: 0,
+        max: 20,
+        current: 20,
+      };
+      const starting = shallow(<StartingContent status={status} isUnexpected={false} />);
+      const progress = starting.find(Progress);
+      expect(progress.prop('value')).toBe(21);
+      expect(progress.prop('color')).toBe('success');
+    });
+  });
+});

web/ui/react-app/src/pages/starting/Starting.tsx

@@ -31,9 +31,9 @@ export const StartingContent: FC<StartingContentProps> = ({ status, isUnexpected
             </p>
             <Progress
               animated
-              value={status?.current}
+              value={status?.current! - status?.min! + 1}
               min={status?.min}
-              max={status?.max}
+              max={status?.max! - status?.min! + 1}
               color={status?.max === status?.current ? 'success' : undefined}
               style={{ width: '10%', margin: 'auto' }}
             />