[TSLA-8560] column customizer modal for flow logs table #9959
Conversation
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
marvin-tigera
added
release-note-required
ronanc-tigera
approved these changes
Mar 10, 2025
| @@ -74,4 +96,5 @@ export const getTableColumns = () => [ | |||
| minWidth: 20, | |||
| accessor: 'dest_port', | |||
| }, | |||
| getCustomizerHeader(onColumnCustomizerOpen), | |||
There was a problem hiding this comment.
Does this need to be in a function? I think it's fine to put it inline
| title='Customize Columns' | ||
| items={columns.filter((c) => !c.disableReordering)} | ||
| onSave={(list) => { | ||
| setColumns([expandoColumn, ...list, customizerColumn]); |
There was a problem hiding this comment.
Instead of creating the column objects in this component, you could just use indices since this list is hard coded
const expandoIndex = 0;
const customizerIndex = X;
const FlowLogsList = () => {
// stuff
<ReorderableCheckList
onSave={(list) => {
setColumns([columns[expandoIndex], ...list, columns[customizerIndex]]);
}
whisker/src/icons/DndIcon.tsx
Outdated
| @@ -0,0 +1,14 @@ | |||
| import { createIcon } from '@chakra-ui/icons'; | |||
|
|
|||
| const CalicoCatIcon = createIcon({ | |||
There was a problem hiding this comment.
Make sure to rename the const too
| path: ( | ||
| <path | ||
| d='M15.0312 0.90625H0.937109C0.473047 0.90625 0.125 1.28594 0.125 1.71836C0.125004 2.21406 0.504688 2.59375 0.937109 2.59375H15.0312C15.4953 2.59375 15.875 2.21406 15.875 1.78164C15.875 1.28594 15.4953 0.90625 15.0312 0.90625ZM15.0312 5.40625H0.937109C0.473047 5.40625 0.125 5.78594 0.125 6.21836C0.125 6.65078 0.504688 7.09375 0.937109 7.09375H15.0312C15.4953 7.09375 15.875 6.71406 15.875 6.28164C15.875 5.84922 15.4953 5.40625 15.0312 5.40625Z' | ||
| fill='#5F5F5F' |
There was a problem hiding this comment.
if possible, pass this using icon props
|
|
||
| const styles = useMultiStyleConfig('ReorderableCheckList', rest); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
is this necessary? I'm wondering could this cause issues if the parent component re-renders. Items will always be different on every render since it's an object
caseydavenport
added
docs-not-required
marvin-tigera
removed
release-note-required
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Related issues/PRs
Todos
Release Note
Reminder for the reviewer
Make sure that this PR has the correct labels and milestone set.
Every PR needs one
docs-*label.docs-pr-required: This change requires a change to the documentation that has not been completed yet.docs-completed: This change has all necessary documentation completed.docs-not-required: This change has no user-facing impact and requires no docs.Every PR needs one
release-note-*label.release-note-required: This PR has user-facing changes. Most PRs should have this label.release-note-not-required: This PR has no user-facing changes.Other optional labels:
cherry-pick-candidate: This PR should be cherry-picked to an earlier release. For bug fixes only.needs-operator-pr: This PR is related to install and requires a corresponding change to the operator.