add spinners to session end buttons

Author: Kerry Archibald

frontend/src/components/BrowserSession.tsx

@@ -12,11 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Button } from "@vector-im/compound-web";
 import { atom, useSetAtom } from "jotai";
 import { atomFamily } from "jotai/utils";
 import { atomWithMutation } from "jotai-urql";
-import { useTransition } from "react";
 
 import { currentBrowserSessionIdAtom, currentUserIdAtom } from "../atoms";
 import { FragmentType, graphql, useFragment } from "../gql";
@@ -25,6 +23,7 @@ import {
   sessionNameFromDeviceInformation,
 } from "../utils/parseUserAgent";
 
+import EndSessionButton from "./Session/EndSessionButton";
 import Session from "./Session/Session";
 
 const FRAGMENT = graphql(/* GraphQL */ `
@@ -71,7 +70,6 @@ type Props = {
 
 const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
   const data = useFragment(FRAGMENT, session);
-  const [pending, startTransition] = useTransition();
   const endSession = useSetAtom(endSessionFamily(data.id));
 
   // Pull those atoms to reset them when the current session is ended
@@ -80,19 +78,16 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
 
   const createdAt = data.createdAt;
 
-  const onSessionEnd = (): void => {
-    startTransition(() => {
-      endSession().then(() => {
-        if (isCurrent) {
-          currentBrowserSessionId({
-            requestPolicy: "network-only",
-          });
-          currentUserId({
-            requestPolicy: "network-only",
-          });
-        }
+  const onSessionEnd = async (): Promise<void> => {
+    await endSession();
+    if (isCurrent) {
+      currentBrowserSessionId({
+        requestPolicy: "network-only",
       });
-    });
+      currentUserId({
+        requestPolicy: "network-only",
+      });
+    }
   };
 
   const deviceInformation = parseUserAgent(data.userAgent || undefined);
@@ -107,16 +102,7 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
       finishedAt={data.finishedAt}
       isCurrent={isCurrent}
     >
-      {!data.finishedAt && (
-        <Button
-          kind="destructive"
-          size="sm"
-          onClick={onSessionEnd}
-          disabled={pending}
-        >
-          Sign out
-        </Button>
-      )}
+      {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}
     </Session>
   );
 };

frontend/src/components/CompatSession.tsx

@@ -12,16 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Button } from "@vector-im/compound-web";
 import { atom, useSetAtom } from "jotai";
 import { atomFamily } from "jotai/utils";
 import { atomWithMutation } from "jotai-urql";
-import { useTransition } from "react";
 
 import { FragmentType, graphql, useFragment } from "../gql";
 import { Link } from "../routing";
 
 import { Session } from "./Session";
+import EndSessionButton from "./Session/EndSessionButton";
 
 export const COMPAT_SESSION_FRAGMENT = graphql(/* GraphQL */ `
   fragment CompatSession_session on CompatSession {
@@ -84,14 +83,11 @@ export const simplifyUrl = (url: string): string => {
 const CompatSession: React.FC<{
   session: FragmentType<typeof COMPAT_SESSION_FRAGMENT>;
 }> = ({ session }) => {
-  const [pending, startTransition] = useTransition();
   const data = useFragment(COMPAT_SESSION_FRAGMENT, session);
   const endCompatSession = useSetAtom(endCompatSessionFamily(data.id));
 
-  const onSessionEnd = (): void => {
-    startTransition(() => {
-      endCompatSession();
-    });
+  const onSessionEnd = async (): Promise<void> => {
+    await endCompatSession();
   };
 
   const sessionName = (
@@ -110,16 +106,7 @@ const CompatSession: React.FC<{
       finishedAt={data.finishedAt || undefined}
       clientName={clientName}
     >
-      {!data.finishedAt && (
-        <Button
-          kind="destructive"
-          size="sm"
-          onClick={onSessionEnd}
-          disabled={pending}
-        >
-          End session
-        </Button>
-      )}
+      {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}
     </Session>
   );
 };

frontend/src/components/OAuth2Session.tsx

@@ -12,18 +12,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Button } from "@vector-im/compound-web";
 import { atom, useSetAtom } from "jotai";
 import { atomFamily } from "jotai/utils";
 import { atomWithMutation } from "jotai-urql";
-import { useTransition } from "react";
 
 import { FragmentType, graphql, useFragment } from "../gql";
 import { Link } from "../routing";
 import { getDeviceIdFromScope } from "../utils/deviceIdFromScope";
 
-// import LoadingSpinner from "./LoadingSpinner/LoadingSpinner";
 import { Session } from "./Session";
+import EndSessionButton from "./Session/EndSessionButton";
 
 export const OAUTH2_SESSION_FRAGMENT = graphql(/* GraphQL */ `
   fragment OAuth2Session_session on Oauth2Session {
@@ -82,19 +80,14 @@ type Props = {
 };
 
 const OAuth2Session: React.FC<Props> = ({ session }) => {
-  const [pending, startTransition] = useTransition();
   const data = useFragment(
     OAUTH2_SESSION_FRAGMENT,
     session,
   ) as Oauth2SessionType;
   const endSession = useSetAtom(endSessionFamily(data.id));
 
-  // @TODO(kerrya) make this wait for session refresh properly
-  // https://github.com/matrix-org/matrix-authentication-service/issues/1533
-  const onSessionEnd = (): void => {
-    startTransition(() => {
-      endSession();
-    });
+  const onSessionEnd = async (): Promise<void> => {
+    await endSession();
   };
 
   const deviceId = getDeviceIdFromScope(data.scope);
@@ -111,18 +104,7 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
       finishedAt={data.finishedAt || undefined}
       clientName={data.client.clientName}
     >
-      {!data.finishedAt && (
-        <Button
-          kind="destructive"
-          size="sm"
-          onClick={onSessionEnd}
-          disabled={pending}
-        >
-          {/* @TODO(kerrya) put this back after pending state works properly */}
-          {/* { pending && <LoadingSpinner />} */}
-          End session
-        </Button>
-      )}
+      {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}
     </Session>
   );
 };

frontend/src/components/Session/EndSessionButton.tsx

@@ -0,0 +1,49 @@
+// Copyright 2023 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Button } from "@vector-im/compound-web";
+import { useState } from "react";
+
+import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";
+
+/**
+ * Generic end session button
+ * Handles loading state while endSession is in progress
+ */
+const EndSessionButton: React.FC<{ endSession: () => Promise<void> }> = ({
+  endSession,
+}) => {
+  const [inProgress, setInProgress] = useState(false);
+  const onClick = async (): Promise<void> => {
+    setInProgress(true);
+    try {
+      await endSession();
+    } catch (error) {
+      console.error("Failed to end session", error);
+    }
+    setInProgress(false);
+  };
+  return (
+    <Button
+      kind="destructive"
+      size="sm"
+      onClick={onClick}
+      disabled={inProgress}
+    >
+      {inProgress && <LoadingSpinner inline />}End session
+    </Button>
+  );
+};
+
+export default EndSessionButton;

frontend/src/components/SessionDetail/CompatSessionDetail.tsx

@@ -12,9 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { H3, Button } from "@vector-im/compound-web";
+import { H3 } from "@vector-im/compound-web";
 import { useSetAtom } from "jotai";
-import { useTransition } from "react";
 
 import { FragmentType, useFragment } from "../../gql";
 import BlockList from "../BlockList/BlockList";
@@ -24,6 +23,7 @@ import {
   simplifyUrl,
 } from "../CompatSession";
 import DateTime from "../DateTime";
+import EndSessionButton from "../Session/EndSessionButton";
 
 import SessionDetails from "./SessionDetails";
 
@@ -32,16 +32,11 @@ type Props = {
 };
 
 const CompatSessionDetail: React.FC<Props> = ({ session }) => {
-  const [pending, startTransition] = useTransition();
   const data = useFragment(COMPAT_SESSION_FRAGMENT, session);
   const endSession = useSetAtom(endCompatSessionFamily(data.id));
 
-  // @TODO(kerrya) make this wait for session refresh properly
-  // https://github.com/matrix-org/matrix-authentication-service/issues/1533
-  const onSessionEnd = (): void => {
-    startTransition(() => {
-      endSession();
-    });
+  const onSessionEnd = async (): Promise<void> => {
+    await endSession();
   };
 
   const finishedAt = data.finishedAt
@@ -79,18 +74,7 @@ const CompatSessionDetail: React.FC<Props> = ({ session }) => {
         {clientDetails.length > 0 ? (
           <SessionDetails title="Client" details={clientDetails} />
         ) : null}
-        {!data.finishedAt && (
-          <Button
-            kind="destructive"
-            size="sm"
-            onClick={onSessionEnd}
-            disabled={pending}
-          >
-            {/* @TODO(kerrya) put this back after pending state works properly */}
-            {/* { pending && <LoadingSpinner />} */}
-            End session
-          </Button>
-        )}
+        {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}
       </BlockList>
     </div>
   );

frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx

@@ -12,9 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { H3, Button } from "@vector-im/compound-web";
+import { H3 } from "@vector-im/compound-web";
 import { useSetAtom } from "jotai";
-import { useTransition } from "react";
 
 import { FragmentType, useFragment } from "../../gql";
 import { getDeviceIdFromScope } from "../../utils/deviceIdFromScope";
@@ -25,6 +24,7 @@ import {
   Oauth2SessionType,
   endSessionFamily,
 } from "../OAuth2Session";
+import EndSessionButton from "../Session/EndSessionButton";
 
 import SessionDetails from "./SessionDetails";
 
@@ -33,19 +33,14 @@ type Props = {
 };
 
 const OAuth2SessionDetail: React.FC<Props> = ({ session }) => {
-  const [pending, startTransition] = useTransition();
   const data = useFragment(
     OAUTH2_SESSION_FRAGMENT,
     session,
   ) as Oauth2SessionType;
   const endSession = useSetAtom(endSessionFamily(data.id));
 
-  // @TODO(kerrya) make this wait for session refresh properly
-  // https://github.com/matrix-org/matrix-authentication-service/issues/1533
-  const onSessionEnd = (): void => {
-    startTransition(() => {
-      endSession();
-    });
+  const onSessionEnd = async (): Promise<void> => {
+    await endSession();
   };
 
   const deviceId = getDeviceIdFromScope(data.scope);
@@ -93,18 +88,7 @@ const OAuth2SessionDetail: React.FC<Props> = ({ session }) => {
         <H3>{deviceId || data.id}</H3>
         <SessionDetails title="Session" details={sessionDetails} />
         <SessionDetails title="Client" details={clientDetails} />
-        {!data.finishedAt && (
-          <Button
-            kind="destructive"
-            size="sm"
-            onClick={onSessionEnd}
-            disabled={pending}
-          >
-            {/* @TODO(kerrya) put this back after pending state works properly */}
-            {/* { pending && <LoadingSpinner />} */}
-            End session
-          </Button>
-        )}
+        {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}
       </BlockList>
     </div>
   );