hook up API request to logout action [Unticketed] (#1139)

* hook up API request to logout action

* run format

* update import orer

* add lint:fix

clients/ops/admin-ui/package.json

@@ -8,6 +8,7 @@
     "build": "next build && next export",
     "start": "next start",
     "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --fix --ext .ts,.tsx",
     "format": "prettier --write src/ __tests__/",
     "format:ci": "prettier --check src/ __tests__/",
     "test": "jest --watch",
@@ -70,4 +71,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

clients/ops/admin-ui/src/features/auth/auth.slice.ts

@@ -10,7 +10,12 @@ import { BASE_URL, STORED_CREDENTIALS_KEY } from "../../constants";
 import { addCommonHeaders } from "../common/CommonHeaders";
 import { utf8ToB64 } from "../common/utils";
 import { User } from "../user-management/types";
-import { LoginRequest, LoginResponse } from "./types";
+import {
+  LoginRequest,
+  LoginResponse,
+  LogoutRequest,
+  LogoutResponse,
+} from "./types";
 
 export interface AuthState {
   user: User | null;
@@ -93,8 +98,15 @@ export const authApi = createApi({
       }),
       invalidatesTags: () => ["Auth"],
     }),
+    logout: build.mutation<LogoutResponse, LogoutRequest>({
+      query: () => ({
+        url: "logout",
+        method: "POST",
+      }),
+      invalidatesTags: () => ["Auth"],
+    }),
   }),
 });
 
-export const { useLoginMutation } = authApi;
+export const { useLoginMutation, useLogoutMutation } = authApi;
 export const { reducer } = authSlice;

clients/ops/admin-ui/src/features/auth/types.ts

@@ -11,3 +11,6 @@ export interface LoginResponse {
     access_token: string;
   };
 }
+
+export interface LogoutRequest {}
+export interface LogoutResponse {}

clients/ops/admin-ui/src/features/common/Header.tsx

@@ -15,22 +15,26 @@ import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import { INDEX_ROUTE } from "../../constants";
-import { logout, selectUser } from "../auth";
+import { logout, selectUser, useLogoutMutation } from "../auth";
 import { UserIcon } from "./Icon";
 import Image from "./Image";
 
 const useHeader = () => {
-  const dispatch = useDispatch();
-  const handleLogout = () => dispatch(logout());
   const { username } = useSelector(selectUser) ?? { username: "" };
-  return {
-    handleLogout,
-    username,
-  };
+  return { username };
 };
 
 const Header: React.FC = () => {
-  const { handleLogout, username } = useHeader();
+  const { username } = useHeader();
+  const [logoutMutation] = useLogoutMutation();
+  const dispatch = useDispatch();
+
+  const handleLogout = async () => {
+    logoutMutation({})
+      .unwrap()
+      .then(() => dispatch(logout()));
+  };
+
   return (
     <header>
       <Flex