1 files changed, 73 insertions, 41 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx
index 2af9dea71..5180c671c 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx
@@ -15,14 +15,14 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
 import { h, VNode } from "preact";
 import { MerchantBackend } from "../../../declaration.js";
 import { CardTable as CardTableActive } from "./TableActive.js";
-import { useState } from 'preact/hooks';
+import { useState } from "preact/hooks";
 import { Translate, useTranslator } from "../../../i18n/index.js";
 
 interface Props {
@@ -35,46 +35,78 @@ interface Props {
   setInstanceName: (s: string) => void;
 }
 
-export function View({ instances, onCreate, onDelete, onPurge, onUpdate, setInstanceName, selected }: Props): VNode {
+export function View({
+  instances,
+  onCreate,
+  onDelete,
+  onPurge,
+  onUpdate,
+  setInstanceName,
+  selected,
+}: Props): VNode {
   const [show, setShow] = useState<"active" | "deleted" | null>("active");
-  const showIsActive = show === 'active' ? "is-active" : ''
-  const showIsDeleted = show === 'deleted' ? "is-active" : ''
-  const showAll = show === null ? "is-active" : ''
-  const i18n = useTranslator()
+  const showIsActive = show === "active" ? "is-active" : "";
+  const showIsDeleted = show === "deleted" ? "is-active" : "";
+  const showAll = show === null ? "is-active" : "";
+  const i18n = useTranslator();
 
-  const showingInstances = showIsDeleted ? 
-    instances.filter(i => i.deleted) : (showIsActive ?
-      instances.filter(i => !i.deleted) :
-      instances)
-  
-  return <div id="app">
+  const showingInstances = showIsDeleted
+    ? instances.filter((i) => i.deleted)
+    : showIsActive
+    ? instances.filter((i) => !i.deleted)
+    : instances;
 
-    <section class="section is-main-section">
-      <div class="columns">
-        <div class="column is-two-thirds">
-          <div class="tabs" style={{ overflow: 'inherit' }}>
-            <ul>
-              <li class={showIsActive}>
-                <div class="has-tooltip-right" data-tooltip={i18n`Only show active instances`}>
-                  <a onClick={() => setShow("active")}><Translate>Active</Translate></a>
-                </div>
-              </li>
-              <li class={showIsDeleted}>
-                <div class="has-tooltip-right" data-tooltip={i18n`Only show deleted instances`}>
-                  <a onClick={() => setShow("deleted")}><Translate>Deleted</Translate></a>
-                </div>
-              </li>
-              <li class={showAll}>
-                <div class="has-tooltip-right" data-tooltip={i18n`Show all instances`}>
-                  <a onClick={() => setShow(null)}><Translate>All</Translate></a>
-                </div>
-              </li>
-            </ul>
+  return (
+    <div id="app">
+      <section class="section is-main-section">
+        <div class="columns">
+          <div class="column is-two-thirds">
+            <div class="tabs" style={{ overflow: "inherit" }}>
+              <ul>
+                <li class={showIsActive}>
+                  <div
+                    class="has-tooltip-right"
+                    data-tooltip={i18n`Only show active instances`}
+                  >
+                    <a onClick={() => setShow("active")}>
+                      <Translate>Active</Translate>
+                    </a>
+                  </div>
+                </li>
+                <li class={showIsDeleted}>
+                  <div
+                    class="has-tooltip-right"
+                    data-tooltip={i18n`Only show deleted instances`}
+                  >
+                    <a onClick={() => setShow("deleted")}>
+                      <Translate>Deleted</Translate>
+                    </a>
+                  </div>
+                </li>
+                <li class={showAll}>
+                  <div
+                    class="has-tooltip-right"
+                    data-tooltip={i18n`Show all instances`}
+                  >
+                    <a onClick={() => setShow(null)}>
+                      <Translate>All</Translate>
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
-      <CardTableActive instances={showingInstances} onDelete={onDelete} onPurge={onPurge} setInstanceName={setInstanceName} onUpdate={onUpdate} selected={selected} onCreate={onCreate} />
-    </section>
-
-  </div >
+        <CardTableActive
+          instances={showingInstances}
+          onDelete={onDelete}
+          onPurge={onPurge}
+          setInstanceName={setInstanceName}
+          onUpdate={onUpdate}
+          selected={selected}
+          onCreate={onCreate}
+        />
+      </section>
+    </div>
+  );
 }