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

app/assets/css/app.css

@@ -729,3 +729,21 @@ input[style*='background-image: url("data:image/png'] {
 input:-webkit-autofill {
   @apply caret-[--grey-25] th-highcontrast:caret-white th-dark:caret-white;
 }
+
+/*
+rules for styling the progress bar on both chrome and firefox
+first rule is for firefox and the second rule is for chrome
+
+use the `.progress-filled` tailwind variant util to style the filled value of the progress bar, 
+and the usual styles to style the unfilled value.
+
+see app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx for an example
+*/
+
+progress {
+  appearance: none;
+}
+
+progress::-webkit-progress-bar {
+  background-color: transparent;
+}

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,32 +37,33 @@ 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 {
+function getLabel(type: StatusType): ReactNode {
   switch (type) {
     case StatusType.Running:
       return 'deployments running';
@@ -77,5 +78,4 @@ function getTooltip(count: number, total: number, type?: StatusType) {
     default:
       return '';
   }
-  }
 }

tailwind.config.js

@@ -35,5 +35,8 @@ module.exports = {
       addVariant('th-highcontrast', '&:is([theme="highcontrast"] *)');
       addVariant('th-dark', '&:is([theme="dark"] *)');
     }),
+    plugin(function ({ addVariant }) {
+      addVariant('progress-filled', ['&::-webkit-progress-value', '&::-moz-progress-bar']);
+    }),
   ],
 };