fix #7109 pending operations on developer page

2 files changed, 98 insertions, 2 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx b/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx
new file mode 100644
index 000000000..1239a03e9
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx
@@ -0,0 +1,47 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { PendingTaskType } from "@gnu-taler/taler-wallet-core";
+import { createExample } from "../test-utils";
+import { View as TestedComponent } from "./DeveloperPage";
+
+export default {
+  title: "wallet/developer",
+  component: TestedComponent,
+  argTypes: {
+    setDeviceName: () => Promise.resolve(),
+  },
+};
+
+export const AllOff = createExample(TestedComponent, {
+  operations: [
+    {
+      type: PendingTaskType.ExchangeUpdate,
+      exchangeBaseUrl: "http://exchange.url.",
+      givesLifeness: false,
+      lastError: undefined,
+      timestampDue: {
+        t_ms: 123123213,
+      },
+      retryInfo: undefined,
+    },
+  ],
+});
diff --git a/packages/taler-wallet-webextension/src/popup/Debug.tsx b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
index 8b5d41657..494f8ecbf 100644
--- a/packages/taler-wallet-webextension/src/popup/Debug.tsx
+++ b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
@@ -14,22 +14,71 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { h, VNode } from "preact";
+import { NotificationType } from "@gnu-taler/taler-util";
+import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
+import { Fragment, h, VNode } from "preact";
 import { Diagnostics } from "../components/Diagnostics";
+import { NotifyUpdateFadeOut } from "../components/styled/index";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { useDiagnostics } from "../hooks/useDiagnostics";
 import * as wxApi from "../wxApi";
 
 export function DeveloperPage(): VNode {
   const [status, timedOut] = useDiagnostics();
+  const listenAllEvents = Array.from<NotificationType>({ length: 1 });
+  listenAllEvents.includes = () => true; // includes every event
+  const operationsResponse = useAsyncAsHook(
+    wxApi.getPendingOperations,
+    listenAllEvents,
+  );
+
+  const operations =
+    operationsResponse === undefined
+      ? []
+      : operationsResponse.hasError
+      ? []
+      : operationsResponse.response.pendingOperations;
+
+  return <View status={status} timedOut={timedOut} operations={operations} />;
+}
+export interface Props {
+  status: any;
+  timedOut: boolean;
+  operations: PendingTaskInfo[];
+}
+
+function hashObjectId(o: any): string {
+  return JSON.stringify(o);
+}
+
+export function View({ status, timedOut, operations }: Props): VNode {
   return (
     <div>
       <p>Debug tools:</p>
       <button onClick={openExtensionPage("/static/popup.html")}>
         wallet tab
       </button>
-      <br />
+
       <button onClick={confirmReset}>reset</button>
+      <br />
       <Diagnostics diagnostics={status} timedOut={timedOut} />
+      {operations && operations.length > 0 && (
+        <Fragment>
+          <p>Pending operations</p>
+          <dl>
+            {operations.reverse().map((o) => {
+              return (
+                <NotifyUpdateFadeOut key={hashObjectId(o)}>
+                  <dt>{o.type}</dt>
+                  <dd>
+                    <pre>{JSON.stringify(o, undefined, 2)}</pre>
+                  </dd>
+                </NotifyUpdateFadeOut>
+              );
+            })}
+          </dl>
+        </Fragment>
+      )}
     </div>
   );
 }