fix #7109 pending operations on developer page

packages/taler-wallet-webextension/src/components/styled/index.tsx

@@ -304,6 +304,18 @@ export const Overlay = styled.div`
   cursor: pointer;
 `;
 
+export const NotifyUpdateFadeOut = styled.div`
+  border: 2px solid red;
+  transition: all 0.4s ease-out;
+  animation: fadeout 1s forwards;
+  animation-delay: 0.1s;
+  @keyframes fadeout {
+    to {
+      border-color: #f5f5f5;
+    }
+  }
+`;
+
 export const CenteredDialog = styled.div`
   position: absolute;
   text-align: left;

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,
+    },
+  ],
+});

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>
   );
 }

packages/taler-wallet-webextension/src/popupEntryPoint.tsx

@@ -32,7 +32,7 @@ import { strings } from "./i18n/strings";
 import { Pages, WalletNavBar } from "./NavigationBar";
 import { BackupPage } from "./wallet/BackupPage";
 import { BalancePage } from "./popup/BalancePage";
-import { DeveloperPage } from "./popup/Debug";
+import { DeveloperPage } from "./popup/DeveloperPage";
 import { HistoryPage } from "./popup/History";
 import { ProviderAddPage } from "./wallet/ProviderAddPage";
 import { ProviderDetailPage } from "./wallet/ProviderDetailPage";

packages/taler-wallet-webextension/src/walletEntryPoint.tsx

@@ -39,7 +39,7 @@ import { SettingsPage } from "./wallet/Settings";
 import { TransactionPage } from "./wallet/Transaction";
 import { WelcomePage } from "./wallet/Welcome";
 import { BackupPage } from "./wallet/BackupPage";
-import { DeveloperPage } from "./popup/Debug";
+import { DeveloperPage } from "./popup/DeveloperPage";
 import { ManualWithdrawPage } from "./wallet/ManualWithdrawPage";
 import { WalletBox } from "./components/styled";
 import { ProviderDetailPage } from "./wallet/ProviderDetailPage";

packages/taler-wallet-webextension/src/wxApi.ts

@@ -33,6 +33,7 @@ import {
 } from "@gnu-taler/taler-util";
 import {
   AddBackupProviderRequest, BackupInfo, OperationFailedError,
+  PendingOperationsResponse,
   RemoveBackupProviderRequest
 } from "@gnu-taler/taler-wallet-core";
 import { ExchangeWithdrawDetails } from "@gnu-taler/taler-wallet-core/src/operations/withdraw";
@@ -338,6 +339,10 @@ export function getExchangeTos(
   });
 }
 
+export function getPendingOperations(): Promise<PendingOperationsResponse> {
+  return callBackend("getPendingOperations", {});
+}
+
 export function addExchange(req: AddExchangeRequest): Promise<void> {
   return callBackend("addExchange", req);
 }