-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor SearchTabPanel from new log viewer folder back to current lo…
…g viewer
- Loading branch information
Showing
10 changed files
with
370 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
.result-button { | ||
user-select: none; | ||
|
||
overflow: hidden; | ||
display: block !important; | ||
|
||
text-overflow: ellipsis; | ||
white-space: nowrap; | ||
} | ||
|
||
.result-text { | ||
display: inline !important; | ||
font-size: 0.875rem !important; | ||
font-weight: 400 !important; | ||
} |
61 changes: 61 additions & 0 deletions
61
src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { | ||
ListItemButton, | ||
Typography, | ||
} from "@mui/joy"; | ||
|
||
import "./Result.css"; | ||
|
||
|
||
interface ResultProps { | ||
message: string, | ||
matchRange: [number, number] | ||
} | ||
|
||
/** | ||
* Displays a button containing a message, which highlights a specific range of text. | ||
* | ||
* @param props | ||
* @param props.message | ||
* @param props.matchRange A two-element array indicating the start and end indices of the substring | ||
* to be highlighted. | ||
* @return | ||
*/ | ||
const Result = ({message, matchRange}: ResultProps) => { | ||
const [ | ||
beforeMatch, | ||
match, | ||
afterMatch, | ||
] = [ | ||
message.slice(0, matchRange[0]), | ||
message.slice(...matchRange), | ||
message.slice(matchRange[1]), | ||
]; | ||
|
||
return ( | ||
<ListItemButton className={"result-button"}> | ||
<Typography | ||
className={"result-text"} | ||
level={"body-xs"} | ||
> | ||
{beforeMatch} | ||
</Typography> | ||
<Typography | ||
className={"result-text"} | ||
level={"body-xs"} | ||
sx={{ | ||
backgroundColor: "warning.softBg", | ||
}} | ||
> | ||
{match} | ||
</Typography> | ||
<Typography | ||
className={"result-text"} | ||
level={"body-xs"} | ||
> | ||
{afterMatch} | ||
</Typography> | ||
</ListItemButton> | ||
); | ||
}; | ||
|
||
export default Result; |
21 changes: 21 additions & 0 deletions
21
src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
.results-group-title-button { | ||
flex-direction: row-reverse !important; | ||
gap: 2px !important; | ||
padding-inline-start: 0 !important; | ||
} | ||
|
||
.results-group-title-container { | ||
display: flex; | ||
flex-grow: 1; | ||
} | ||
|
||
.results-group-title-text-container { | ||
flex-grow: 1; | ||
gap: 0.1rem; | ||
align-items: center; | ||
} | ||
|
||
.results-group-content { | ||
margin-left: 1.5px !important; | ||
border-left: 1px solid var(--joy-palette-neutral-outlinedBorder, #cdd7e1); | ||
} |
107 changes: 107 additions & 0 deletions
107
src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
import { | ||
useEffect, | ||
useState, | ||
} from "react"; | ||
import * as React from "react"; | ||
|
||
import { | ||
Accordion, | ||
AccordionDetails, | ||
AccordionSummary, | ||
Box, | ||
Chip, | ||
List, | ||
Stack, | ||
Typography, | ||
} from "@mui/joy"; | ||
|
||
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined"; | ||
|
||
import Result from "./Result"; | ||
|
||
import "./ResultsGroup.css"; | ||
|
||
|
||
interface SearchResultOnPage { | ||
logEventNum: number, | ||
message: string, | ||
matchRange: [number, number], | ||
} | ||
|
||
interface ResultsGroupProps { | ||
isAllExpanded: boolean, | ||
pageNum: number, | ||
results: SearchResultOnPage[] | ||
} | ||
|
||
/** | ||
* | ||
* @param props | ||
* @param props.isAllCollapsed | ||
* @param props.pageNum | ||
* @param props.results | ||
* @param props.isAllExpanded | ||
*/ | ||
const ResultsGroup = ({ | ||
isAllExpanded, | ||
pageNum, | ||
results, | ||
}: ResultsGroupProps) => { | ||
const [isExpanded, setIsExpanded] = useState<boolean>(isAllExpanded); | ||
|
||
const handleAccordionChange = ( | ||
_: React.SyntheticEvent, | ||
newValue: boolean | ||
) => { | ||
setIsExpanded(newValue); | ||
}; | ||
|
||
// On `isAllExpanded` updates, sync current results group's expand status. | ||
useEffect(() => { | ||
setIsExpanded(isAllExpanded); | ||
}, [isAllExpanded]); | ||
|
||
return ( | ||
<Accordion | ||
expanded={isExpanded} | ||
onChange={handleAccordionChange} | ||
> | ||
<AccordionSummary | ||
slotProps={{ | ||
button: {className: "results-group-title-button"}, | ||
}} | ||
> | ||
<Box className={"results-group-title-container"}> | ||
<Stack | ||
className={"results-group-title-text-container"} | ||
direction={"row"} | ||
> | ||
<DescriptionOutlinedIcon fontSize={"inherit"}/> | ||
<Typography | ||
level={"title-sm"} | ||
> | ||
Page | ||
{" "} | ||
{pageNum} | ||
</Typography> | ||
</Stack> | ||
<Chip size={"sm"}> | ||
{results.length} | ||
</Chip> | ||
</Box> | ||
</AccordionSummary> | ||
<AccordionDetails className={"results-group-content"}> | ||
<List size={"sm"}> | ||
{results.map((r, index) => ( | ||
<Result | ||
key={index} | ||
matchRange={r.matchRange} | ||
message={r.message}/> | ||
))} | ||
</List> | ||
</AccordionDetails> | ||
</Accordion> | ||
); | ||
}; | ||
|
||
export default ResultsGroup; |
119 changes: 119 additions & 0 deletions
119
src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
import {useState} from "react"; | ||
|
||
import { | ||
AccordionGroup, | ||
IconButton, | ||
Textarea, | ||
ToggleButtonGroup, | ||
} from "@mui/joy"; | ||
|
||
import UnfoldLessIcon from "@mui/icons-material/UnfoldLess"; | ||
import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore"; | ||
|
||
import { | ||
TAB_DISPLAY_NAMES, | ||
TAB_NAME, | ||
} from "../../../../../typings/tab"; | ||
import CustomTabPanel from "../CustomTabPanel"; | ||
import TitleButton from "../TitleButton"; | ||
import ResultsGroup from "./ResultsGroup"; | ||
|
||
|
||
enum SEARCH_OPTION { | ||
IS_CASE_SENSITIVE = "isCaseSensitive", | ||
IS_REGEX = "isRegex" | ||
} | ||
|
||
/** | ||
* | ||
*/ | ||
const SAMPLE_RESULTS = Object.freeze({ | ||
1: [{logEventNum: 1, | ||
message: "hi how are you", | ||
matchRange: [0, | ||
2] as [number, number]}], | ||
2: [{logEventNum: 202, | ||
message: "i'm a super long message that supposedly overflows in the panel width.", | ||
matchRange: [4, | ||
6] as [number, number]}], | ||
8: [{logEventNum: 808, | ||
message: "hi how are you", | ||
matchRange: [4, | ||
6] as [number, number]}, | ||
{logEventNum: 809, | ||
message: "hi how are you", | ||
matchRange: [4, | ||
6] as [number, number]}], | ||
}); | ||
|
||
/** | ||
* Displays a panel for submitting search queries and viewing query results. | ||
* | ||
* @return | ||
*/ | ||
const SearchTabPanel = () => { | ||
const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true); | ||
const [searchOptions, setSearchOptions] = useState<SEARCH_OPTION[]>([]); | ||
|
||
return ( | ||
<CustomTabPanel | ||
tabName={TAB_NAME.SEARCH} | ||
title={TAB_DISPLAY_NAMES[TAB_NAME.SEARCH]} | ||
titleButtons={<> | ||
<TitleButton onClick={() => { setIsAllExpanded((v) => !v); }}> | ||
{isAllExpanded ? | ||
<UnfoldLessIcon/> : | ||
<UnfoldMoreIcon/>} | ||
</TitleButton> | ||
</>} | ||
> | ||
<Textarea | ||
maxRows={7} | ||
placeholder={"Search"} | ||
size={"sm"} | ||
slotProps={{endDecorator: {sx: {marginBlockStart: 0, display: "block"}}}} | ||
sx={{flexDirection: "row"}} | ||
endDecorator={ | ||
<> | ||
<ToggleButtonGroup | ||
size={"sm"} | ||
spacing={0.3} | ||
sx={{borderRadius: "2px"}} | ||
value={searchOptions} | ||
variant={"plain"} | ||
onChange={(_, newValue) => { | ||
setSearchOptions(newValue); | ||
}} | ||
> | ||
<IconButton | ||
sx={{fontFamily: "Inter"}} | ||
value={SEARCH_OPTION.IS_CASE_SENSITIVE} | ||
> | ||
Aa | ||
</IconButton> | ||
<IconButton | ||
sx={{fontFamily: "Inter"}} | ||
value={SEARCH_OPTION.IS_REGEX} | ||
> | ||
.* | ||
</IconButton> | ||
</ToggleButtonGroup> | ||
</> | ||
}/> | ||
<AccordionGroup | ||
disableDivider={true} | ||
size={"sm"} | ||
> | ||
{Object.entries(SAMPLE_RESULTS).map(([pageNum, resultsOnPage]) => ( | ||
<ResultsGroup | ||
isAllExpanded={isAllExpanded} | ||
key={pageNum} | ||
pageNum={parseInt(pageNum, 10)} | ||
results={resultsOnPage}/> | ||
))} | ||
</AccordionGroup> | ||
</CustomTabPanel> | ||
); | ||
}; | ||
|
||
export default SearchTabPanel; |
4 changes: 4 additions & 0 deletions
4
src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
.sidebar-tab-title-button { | ||
min-width: 0 !important; | ||
min-height: 0 !important; | ||
} |
Oops, something went wrong.