fix minor glitches when changing authorization

Author: followynne

src/Serilog.Ui.Web/src/app/components/Authorization/BasicModal.tsx

@@ -61,12 +61,7 @@ const BasicModal = ({ onClose }: { onClose: () => void }) => {
         >
           Save
         </Button>
-        <Button
-          display={!isHeaderReady ? 'none' : 'inherit'}
-          onClick={() => {
-            clearAuthState();
-          }}
-        >
+        <Button display={!isHeaderReady ? 'none' : 'inherit'} onClick={clearAuthState}>
           Change
         </Button>
         <Button onClick={onClose}>Close</Button>

src/Serilog.Ui.Web/src/app/components/Authorization/JwtModal.tsx

@@ -44,12 +44,7 @@ const JwtModal = ({ onClose }: { onClose: () => void }) => {
         >
           Save
         </Button>
-        <Button
-          display={!isHeaderReady ? 'none' : 'inherit'}
-          onClick={() => {
-            clearAuthState();
-          }}
-        >
+        <Button display={!isHeaderReady ? 'none' : 'inherit'} onClick={clearAuthState}>
           Change Token
         </Button>
         <Button onClick={onClose}>Close</Button>

src/Serilog.Ui.Web/src/app/components/Search/Search.tsx

@@ -14,10 +14,10 @@ import useQueryLogs from 'app/hooks/useQueryLogs';
 import { useQueryTableKeys } from 'app/hooks/useQueryTableKeys';
 import { useSearchForm } from 'app/hooks/useSearchForm';
 import { useSerilogUiProps } from 'app/hooks/useSerilogUiProps';
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import { useController, useWatch } from 'react-hook-form';
 import classes from 'style/search.module.css';
-import { LogLevel } from '../../../types/types';
+import { DispatchedCustomEvents, LogLevel } from '../../../types/types';
 
 const levelsArray = Object.keys(LogLevel).map((level) => ({
   value: level,
@@ -49,6 +49,18 @@ const Search = ({ onRefetch }: { onRefetch?: () => void }) => {
     }
   };
 
+  useEffect(() => {
+    const resetTableKey = () => {
+      reset(true);
+    };
+
+    document.addEventListener(DispatchedCustomEvents.RemoveTableKey, resetTableKey);
+
+    return () =>
+      document.removeEventListener(DispatchedCustomEvents.RemoveTableKey, resetTableKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <form aria-label="search-logs-form" onSubmit={() => {}}>
       <Grid className={classes.searchFiltersGrid}>

src/Serilog.Ui.Web/src/app/hooks/useAuthProperties.tsx

@@ -1,3 +1,4 @@
+import { useQueryClient } from '@tanstack/react-query';
 import {
   checkErrors,
   clearAuth,
@@ -8,10 +9,17 @@ import {
   saveAuthKey,
 } from 'app/util/auth';
 import { createRequestInit } from 'app/util/queries';
-import { createContext, type ReactNode, useCallback, useContext, useMemo, useState } from 'react';
-import { useSerilogUiProps } from './useSerilogUiProps';
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { AuthType, DispatchedCustomEvents } from '../../types/types.ts';
 import { isStringGuard } from '../util/guards.ts';
-import { AuthType } from '../../types/types.ts';
+import { useSerilogUiProps } from './useSerilogUiProps';
 
 interface AuthProps {
   authProps: IAuthPropertiesData;
@@ -46,6 +54,7 @@ export const AuthPropertiesProvider = ({
 }: {
   children: ReactNode | undefined;
 }) => {
+  const queryClient = useQueryClient();
   const { authType, routePrefix } = useSerilogUiProps();
 
   const [authInfo, setAuthInfo] = useState<IAuthPropertiesData>({
@@ -57,7 +66,7 @@ export const AuthPropertiesProvider = ({
     [authInfo, authType],
   );
   const isHeaderReady = authType === AuthType.Custom || isStringGuard(authHeader);
-  
+
   const fetchInfo = useMemo(
     () => ({
       headers: createRequestInit(authType, authHeader),
@@ -68,8 +77,12 @@ export const AuthPropertiesProvider = ({
 
   const clearAuthState = useCallback(() => {
     const cleanState = clearAuth();
+
+    queryClient.removeQueries({ queryKey: ['get-keys'], exact: false });
+    document.dispatchEvent(new CustomEvent(DispatchedCustomEvents.RemoveTableKey));
+
     setAuthInfo(cleanState);
-  }, []);
+  }, [queryClient]);
 
   const saveAuthState = useCallback((input: { [key: string]: string }) => {
     const validationInfo: string[] = [];
@@ -114,8 +127,14 @@ export const AuthPropertiesProvider = ({
 };
 
 export const useAuthProperties = () => {
-  const { authProps, authHeader, fetchInfo, isHeaderReady, clearAuthState, saveAuthState } =
-    useContext(AuthPropertiesContext);
+  const {
+    authProps,
+    authHeader,
+    fetchInfo,
+    isHeaderReady,
+    clearAuthState,
+    saveAuthState,
+  } = useContext(AuthPropertiesContext);
 
   return {
     ...authProps,

src/Serilog.Ui.Web/src/app/hooks/useColumnsInfo.ts

@@ -12,7 +12,7 @@ export const useColumnsInfo = (currentColumn = '', logPropertyType = '') => {
   const { getValues } = useSearchForm();
   const { columnsInfo } = useSerilogUiProps();
 
-  const currentTable = getValues('table');
+  const currentTable = getValues('table') ?? '';
   const hasInfoOnCurrentTable = columnsInfo?.[currentTable];
 
   // treating Properties as an additional column, in the rendering

src/Serilog.Ui.Web/src/app/hooks/useQueryLogs.ts

@@ -14,7 +14,6 @@ const useQueryLogs = () => {
   const sortBy = useWatch({ name: 'sortBy' })
   const sortOn = useWatch({ name: 'sortOn' })
 
-  console.log(['get-logs', entriesPerPage, page, sortBy, sortOn, currentDbKey])
   return useQuery({
     enabled: true,
     queryKey: ['get-logs', entriesPerPage, page, sortBy, sortOn, currentDbKey],

src/Serilog.Ui.Web/src/app/hooks/useSearchForm.ts

@@ -41,12 +41,12 @@ export const useSearchForm = () => {
   const { data } = useQueryTableKeys();
   const tableKeysDefaultValue = isArrayGuard(data) ? data.at(0)! : '';
 
-  const resetForm = () => {
+  const resetForm = (blankTable?: boolean) => {
     const runRefetch = runManualRefetch(useSearchContext.getValues, tableKeysDefaultValue)
 
     useSearchContext.reset({
       ...searchFormInitialValues,
-      table: tableKeysDefaultValue,
+      table: !blankTable ? tableKeysDefaultValue : null,
     });
 
     return runRefetch

src/Serilog.Ui.Web/src/types/types.ts

@@ -49,7 +49,7 @@ export enum SearchParameters {
 }
 
 export interface SearchForm {
-  table: string;
+  table: string | null;
   level: LogLevel | null;
   startDate: Date | null;
   endDate: Date | null;
@@ -96,6 +96,8 @@ export type ColumnsInfo = {
   };
 };
 
+export enum DispatchedCustomEvents { RemoveTableKey = 'remove-table-key' }
+
 export interface SerilogUiConfig {
   authType?: AuthType;
   routePrefix?: string;