Merge branch 'main' into queryOptionButton-fix

# Conflicts: # src/contexts/StateContextProvider.tsx
y-scope · Dec 3, 2024 · 01abd28 · 01abd28
2 parents f7e3698 + f5dd33c
commit 01abd28
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 20 deletions.
diff --git a/src/components/StatusBar/LogLevelSelect/index.tsx b/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -32,7 +32,10 @@ import {
     LOG_LEVEL_NAMES,
     MAX_LOG_LEVEL,
 } from "../../../typings/logs";
-import {UI_ELEMENT} from "../../../typings/states";
+import {
+    UI_ELEMENT,
+    UI_STATE,
+} from "../../../typings/states";
 import {range} from "../../../utils/data";
 import {
     ignorePointerIfFastLoading,
@@ -151,7 +154,7 @@ const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
  * @return
  */
 const LogLevelSelect = () => {
-    const {uiState, setLogLevelFilter} = useContext(StateContext);
+    const {uiState, filterLogs} = useContext(StateContext);
     const [selectedLogLevels, setSelectedLogLevels] = useState<LOG_LEVEL[]>([]);
     const disabled = isDisabled(uiState, UI_ELEMENT.LOG_LEVEL_FILTER);
 
@@ -169,6 +172,17 @@ const LogLevelSelect = () => {
         </Box>
     );
 
+    const updateFilter = useCallback((logLevels: LOG_LEVEL[]) => {
+        setSelectedLogLevels(logLevels);
+
+        filterLogs((0 === logLevels.length ?
+            null :
+            logLevels));
+    }, [
+        filterLogs,
+        setSelectedLogLevels,
+    ]);
+
     const handleCheckboxClick = useCallback((ev: React.MouseEvent<HTMLInputElement>) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -184,8 +198,11 @@ const LogLevelSelect = () => {
                 value,
             ];
         }
-        setSelectedLogLevels(newSelectedLogLevels.sort((a, b) => a - b));
-    }, [selectedLogLevels]);
+        updateFilter(newSelectedLogLevels.sort((a, b) => a - b));
+    }, [
+        selectedLogLevels,
+        updateFilter,
+    ]);
 
     const handleOptionClick = useCallback((ev: React.MouseEvent) => {
         const currentTarget = ev.currentTarget as HTMLElement;
@@ -196,21 +213,19 @@ const LogLevelSelect = () => {
         }
 
         const selectedValue = Number(currentTarget.dataset.value);
-        setSelectedLogLevels(range({begin: selectedValue, end: 1 + MAX_LOG_LEVEL}));
-    }, []);
+        updateFilter(range({begin: selectedValue, end: 1 + MAX_LOG_LEVEL}));
+    }, [updateFilter]);
 
     const handleSelectClearButtonClick = () => {
-        setSelectedLogLevels([]);
+        updateFilter([]);
     };
 
+    // On `uiState` update, clear `selectedLogLevels` if the state is `UI_STATE.FILE_LOADING`
     useEffect(() => {
-        setLogLevelFilter((0 === selectedLogLevels.length ?
-            null :
-            selectedLogLevels));
-    }, [
-        setLogLevelFilter,
-        selectedLogLevels,
-    ]);
+        if (UI_STATE.FILE_LOADING === uiState) {
+            setSelectedLogLevels([]);
+        }
+    }, [uiState]);
 
     return (
         <Select

diff --git a/src/components/modals/SettingsModal/SettingsDialog.tsx b/src/components/modals/SettingsModal/SettingsDialog.tsx
@@ -35,7 +35,7 @@ import ThemeSwitchToggle from "./ThemeSwitchToggle";
 const CONFIG_FORM_FIELDS = [
     {
         helperText: (
-            <p>
+            <span>
                 [JSON] Format string for formatting a JSON log event as plain text. See the
                 {" "}
                 <Link
@@ -48,7 +48,7 @@ const CONFIG_FORM_FIELDS = [
                 </Link>
                 {" "}
                 or leave this blank to display the entire log event.
-            </p>
+            </span>
         ),
         initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString,
         label: "Decoder: Format string",

diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
@@ -78,10 +78,10 @@ interface StateContextType {
     queryResults: QueryResults,
 
     exportLogs: () => void,
+    filterLogs: (filter: LogLevelFilter) => void,
     loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void,
     loadPageByAction: (navAction: NavigationAction) => void,
     setIsSettingsModalOpen: (isOpen: boolean) => void,
-    setLogLevelFilter: (filter: LogLevelFilter) => void,
     startQuery: (queryArgs: QueryArgs) => void,
 }
 const StateContext = createContext<StateContextType>({} as StateContextType);
@@ -104,10 +104,10 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     uiState: UI_STATE.UNOPENED,
 
     exportLogs: () => null,
+    filterLogs: () => null,
     loadFile: () => null,
     loadPageByAction: () => null,
     setIsSettingsModalOpen: () => null,
-    setLogLevelFilter: () => null,
     startQuery: () => null,
 });
 
@@ -444,7 +444,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         loadPageByCursor(mainWorkerRef.current, cursor);
     }, []);
 
-    const setLogLevelFilter = useCallback((filter: LogLevelFilter) => {
+    const filterLogs = useCallback((filter: LogLevelFilter) => {
         if (null === mainWorkerRef.current) {
             return;
         }
@@ -547,10 +547,10 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 uiState: uiState,
 
                 exportLogs: exportLogs,
+                filterLogs: filterLogs,
                 loadFile: loadFile,
                 loadPageByAction: loadPageByAction,
                 setIsSettingsModalOpen: setIsSettingsModalOpen,
-                setLogLevelFilter: setLogLevelFilter,
                 startQuery: startQuery,
             }}
         >