Refactor buttons

gimlet-io · Apr 8, 2024 · 0fa0dee · 0fa0dee
1 parent a7fabf1
commit 0fa0dee
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 24 deletions.
diff --git a/web/src/HelmRelease.jsx b/web/src/HelmRelease.jsx
@@ -18,7 +18,7 @@ export function HelmRelease(props) {
   return (
     <div
       ref={ref}
-      className={(highlight ? "ring-2 ring-indigo-600 ring-offset-2" : "") + " rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow"}
+      className={`${highlight ? "ring-2 ring-indigo-600 ring-offset-2" : ""} ${item.spec.suspend ? "bg-neutral-400" : ""} rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow`}
       key={`hr-${item.metadata.namespace}/${item.metadata.name}`}
     >
       <div className="col-span-2">
@@ -37,14 +37,17 @@ export function HelmRelease(props) {
       </div>
       <div className="grid grid-cols-1 text-right space-y-1">
         <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"
-          onClick={() => capacitorClient.suspend("helmrelease", item.metadata.namespace, item.metadata.name)}
+          onClick={() => {
+            if (item.spec.suspend) {
+              // eslint-disable-next-line no-restricted-globals
+              confirm(`Are you sure you want to resume ${item.metadata.name}?`) && capacitorClient.resume("helmrelease", item.metadata.namespace, item.metadata.name);
+            } else {
+              // eslint-disable-next-line no-restricted-globals
+              confirm(`Are you sure you want to suspend ${item.metadata.name}?`) && capacitorClient.suspend("helmrelease", item.metadata.namespace, item.metadata.name);
+            }
+          }}
         >
-          Suspend
-        </button>
-        <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"
-          onClick={() => capacitorClient.resume("helmrelease", item.metadata.namespace, item.metadata.name)}
-        >
-          Resume
+          {item.spec.suspend ? "Resume" : "Suspend"}
         </button>
         <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"
           onClick={() => capacitorClient.reconcile("helmrelease", item.metadata.namespace, item.metadata.name)}

diff --git a/web/src/Kustomization.jsx b/web/src/Kustomization.jsx
@@ -30,7 +30,7 @@ export function Kustomization(props) {
 
   return (
     <div
-      className={(highlight ? "ring-2 ring-indigo-600 ring-offset-2" : "") + " rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow"}
+      className={`${highlight ? "ring-2 ring-indigo-600 ring-offset-2" : ""} ${item.spec.suspend ? "bg-neutral-400" : ""} rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow`}
       key={`${item.metadata.namespace}/${item.metadata.name}`}
     >
       <div className="col-span-2">
@@ -59,14 +59,17 @@ export function Kustomization(props) {
       </div>
       <div className="grid grid-cols-1 text-right space-y-1">
         <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"
-          onClick={() => capacitorClient.suspend("kustomization", item.metadata.namespace, item.metadata.name)}
+          onClick={() => {
+            if (item.spec.suspend) {
+              // eslint-disable-next-line no-restricted-globals
+              confirm(`Are you sure you want to resume ${item.metadata.name}?`) && capacitorClient.resume("kustomization", item.metadata.namespace, item.metadata.name);
+            } else {
+              // eslint-disable-next-line no-restricted-globals
+              confirm(`Are you sure you want to suspend ${item.metadata.name}?`) && capacitorClient.suspend("kustomization", item.metadata.namespace, item.metadata.name);
+            }
+          }}
         >
-          Suspend
-        </button>
-        <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"
-          onClick={() => capacitorClient.resume("kustomization", item.metadata.namespace, item.metadata.name)}
-        >
-          Resume
+          {item.spec.suspend ? "Resume" : "Suspend"}
         </button>
         <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"
           onClick={() => capacitorClient.reconcile("kustomization", item.metadata.namespace, item.metadata.name)}

diff --git a/web/src/Source.jsx b/web/src/Source.jsx
@@ -23,7 +23,7 @@ export function Source(props) {
   return (
     <div
       ref={ref}
-      className={(highlight ? "ring-2 ring-indigo-600 ring-offset-2" : "") + " rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow"}
+      className={`${highlight ? "ring-2 ring-indigo-600 ring-offset-2" : ""} ${source.spec.suspend ? "bg-neutral-400" : ""} rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow`}
       key={`${source.kind}/${source.metadata.namespace}/${source.metadata.name}`}
     >
       <div className="col-span-2">
@@ -56,14 +56,17 @@ export function Source(props) {
       </div>
       <div className="grid grid-cols-1 text-right space-y-1">
         <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"
-          onClick={() => capacitorClient.suspend(source.kind, source.metadata.namespace, source.metadata.name)}
+          onClick={() => {
+            if (source.spec.suspend) {
+              // eslint-disable-next-line no-restricted-globals
+              confirm(`Are you sure you want to resume ${source.metadata.name}?`) && capacitorClient.resume(source.kind, source.metadata.namespace, source.metadata.name);
+            } else {
+              // eslint-disable-next-line no-restricted-globals
+              confirm(`Are you sure you want to suspend ${source.metadata.name}?`) && capacitorClient.suspend(source.kind, source.metadata.namespace, source.metadata.name);
+            }
+          }}
         >
-          Suspend
-        </button>
-        <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"
-          onClick={() => capacitorClient.resume(source.kind, source.metadata.namespace, source.metadata.name)}
-        >
-          Resume
+          {source.spec.suspend ? "Resume" : "Suspend"}
         </button>
         <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"
           onClick={() => capacitorClient.reconcile(source.kind, source.metadata.namespace, source.metadata.name)}