From 521eb5f1141d895ea41a5be967f69e9323f3304b Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Thu, 4 Apr 2024 18:12:27 +0300
Subject: [PATCH] refactor(edge): use native progress tag for deployment
 counter [EE-6075] (#10936)

---
 app/assets/css/app.css                        | 18 +++++++
 .../DeploymentCounter.stories.tsx             | 45 ++++++++++++++++
 .../EdgeStacksDatatable/DeploymentCounter.tsx | 54 +++++++++----------
 tailwind.config.js                            |  3 ++
 4 files changed, 93 insertions(+), 27 deletions(-)
 create mode 100644 app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.stories.tsx

diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index 82c0e21f7..3bdfa2f8f 100644
--- a/app/assets/css/app.css
+++ b/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;
+}
diff --git a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.stories.tsx b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.stories.tsx
new file mode 100644
index 000000000..c0af7a9e6
--- /dev/null
+++ b/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,
+  },
+};
diff --git a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx
index 2b09ea968..5bc0279c0 100644
--- a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx
+++ b/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 '';
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 89859ccaf..490546a7b 100644
--- a/tailwind.config.js
+++ b/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']);
+    }),
   ],
 };