Add UI SQS message send/list/delete features #1140
Conversation
- Centralize message fetching to prevent component remounting - Implement message deletion with SQS API integration - Add HTML entity decoding for message display - Include comprehensive tests and performance optimizations - Update component architecture for
tuliocll
changed the title
…tions - Replaced `notistack` with a custom Snackbar context for better control over notifications. - Simplified the QueueMessagesList component by removing unnecessary useMemo hooks and directly using utility functions for formatting and truncating text. - Updated QueueRow and QueueRowDetails components to streamline props and improve readability. - Enhanced error handling in message deletion and fetching functions with a centralized error message utility. - Added unit tests for new Snackbar context and refactored QueueService tests to align with the new structure. - Introduced utility functions for decoding HTML entities, formatting dates, and truncating text. - Cleaned up unused dependencies and ensured consistent code style across components.
|
Thanks for the review — sorry for the many changes! |
| } | ||
|
|
||
| const {row} = props | ||
| function ExpandableArrowButton({ isExpanded }: { isExpanded: boolean }) { |
There was a problem hiding this comment.
Hm... I don't think this needs to be declared in a function. isExpanded can be accessed directly from the state. Also, this is used only once here, so you could simply keep the returned jsx straight in the TableCell below
<TableCell>
<IconButton
aria-label="open-details"
size="small"
onClick={() => setIsExpanded((prevState) => !prevState)}
>
{isExpanded ? <KeyboardArrowRight /> : <KeyboardArrowDown />}
</IconButton>
</TableCell>|
|
||
| const RowDetails: React.FC<{ props: { isExpanded: boolean, queueName: string } }> = ({props}) => { | ||
| const RowDetails: React.FC<{ |
There was a problem hiding this comment.
would be nice to extract the props type 🙂
| value: number; | ||
| } | ||
|
|
||
| function TabPanel(props: TabPanelProps) { |
There was a problem hiding this comment.
Could you extract this component (together with the props type) outside of the RowDetails? Otherwise, it gets re-declared on every RowDetails render.
| const mockUpdateMessageExpandedState = jest.fn(); | ||
| const mockOnRefreshMessages = jest.fn(); | ||
|
|
||
| const renderWithSnackbarProvider = (component: React.ReactElement) => { |
There was a problem hiding this comment.
I see this helper declared 3 times. Could it be extracted to a tests/utils.ts so it's reused?
| }) | ||
| }) | ||
| } | ||
| export default function useRefreshedQueueStatistics(): { |
| QueueMessagesData[] | ||
| >([]); | ||
|
|
||
| const updateQueue = useCallback( |
There was a problem hiding this comment.
no need to use useCallback if its dependency array stays empty
| [updateQueue] | ||
| ); | ||
|
|
||
| const updateMessageExpandedState = useCallback( |
|
|
||
| await fetchQueueMessages(queueName); | ||
| } catch (error) { | ||
| console.error("Erro ao deletar mensagem:", error); |
| @@ -0,0 +1,5 @@ | |||
| export default function decodeHtmlEntities(text: string) { | |||
There was a problem hiding this comment.
Could we have all these utilities tested? 🙏🏻
Hello guys, I want to contribute with these features that help me a lot with this awesome software!
I created three new features that make working with SQS messages much easier: