refactor(edge): use native progress tag for deployment counter [EE-6075] (#10936)

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.stories.tsx

@@ -0,0 +1,45 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { StatusType } from '../../types';
+
+import { DeploymentCounter } from './DeploymentCounter';
+
+const meta: Meta<typeof DeploymentCounter> = {
+  title: 'Edge/DeploymentCounter',
+  component: DeploymentCounter,
+};
+export default meta;
+
+type Story = StoryObj<typeof DeploymentCounter>;
+
+export const Running: Story = {
+  args: {
+    count: 5,
+    total: 10,
+    type: StatusType.Running,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    count: 3,
+    total: 10,
+    type: StatusType.Error,
+  },
+};
+
+export const Acknowledged: Story = {
+  args: {
+    count: 7,
+    total: 10,
+    type: StatusType.Acknowledged,
+  },
+};
+
+export const ImagesPulled: Story = {
+  args: {
+    count: 9,
+    total: 10,
+    type: StatusType.ImagesPulled,
+  },
+};

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx

@@ -37,45 +37,45 @@ export function DeploymentCounter({
 }: {
   count: number;
   total: number;
-  type?: StatusType;
+  type: StatusType;
 }) {
-  const width = total ? (count / total) * 100 : 0;
-
   return (
     <TooltipWithChildren message={getTooltip(count, total, type)}>
-      <div className="h-2 w-full overflow-hidden rounded-lg bg-gray-4">
-        <div
-          style={{ width: `${width}%` }}
-          className={clsx('h-full rounded-lg', {
-            'bg-success-7': type === StatusType.Running,
-            'bg-error-7': type === StatusType.Error,
-            'bg-blue-9': type === StatusType.Acknowledged,
-            'bg-yellow-7': type === StatusType.ImagesPulled,
+      <div className="h-2 w-full overflow-hidden rounded-lg">
+        <progress
+          aria-label={`${getLabel(type)}`}
+          className={clsx('bg-gray-4 w-full', {
+            'progress-filled:bg-success-7': type === StatusType.Running,
+            'progress-filled:bg-error-7': type === StatusType.Error,
+            'progress-filled:bg-blue-9': type === StatusType.Acknowledged,
+            'progress-filled:bg-yellow-7': type === StatusType.ImagesPulled,
           })}
+          max={total}
+          value={total ? count : 0}
         />
       </div>
     </TooltipWithChildren>
   );
 }
 
-function getTooltip(count: number, total: number, type?: StatusType) {
+function getTooltip(count: number, total: number, type: StatusType) {
   const label = getLabel(type);
   return `${count} of ${total} ${label}`;
+}
 
-  function getLabel(type?: StatusType): ReactNode {
-    switch (type) {
-      case StatusType.Running:
-        return 'deployments running';
-      case StatusType.DeploymentReceived:
-        return 'deployments received';
-      case StatusType.Error:
-        return 'deployments failed';
-      case StatusType.Acknowledged:
-        return 'deployments acknowledged';
-      case StatusType.ImagesPulled:
-        return 'images pre-pulled';
-      default:
-        return '';
-    }
+function getLabel(type: StatusType): ReactNode {
+  switch (type) {
+    case StatusType.Running:
+      return 'deployments running';
+    case StatusType.DeploymentReceived:
+      return 'deployments received';
+    case StatusType.Error:
+      return 'deployments failed';
+    case StatusType.Acknowledged:
+      return 'deployments acknowledged';
+    case StatusType.ImagesPulled:
+      return 'images pre-pulled';
+    default:
+      return '';
   }
 }