Add drag drop column component #766
Conversation
|
lgtm! can we add a cypress test as well, just to keep inline with the rest of the components. |
|
@aferd do you know if the cypress component tests are actually being used? I can't get them to run locally (and it doesn't look like the cypress component tests are part of the test_cypress check below) but I don't have an issue running the one cypress e2e test. |
There was a problem hiding this comment.
I am confused about the relationship between this new component and the existing ColumnManagementModal. Can the documentation and file structure of these components be combined?
I think the ColumnManagementModal should be leveraging this ColumnManagement component under the hood. And they should not be separate nav items.
|
@nicolethoen we didn't wanted to remove the ColumnManagementModal implementation, but because it's not really surfaced anywhere we could add another example in the ColumnManagement component with modal example and remove the ColumnManagementModal 🤔 Do you want @apinkert to do it in this PR or seperate one? |
|
I like the idea of the ColumnManagement component being something that can be dropped into a Modal and doing that in our docs in lieu of the preexisting ColumnManagementModal component. It looks like 4 products are currently using the ColumnManagementModal according to PF analytics reports, so we cannot outright move it, but we could remove it from the docs - or mark it deprecated in the short term. I wonder if the component name (and relevant props) should use a different term other than ColumnManagement, since this component could be used for any sort of list management - like nav items. I've asked our designers if they have an opinion about the name. |
|
@edonehoo suggested for naming ideas:
Curious about people's opinions. I think I like 'view manager' the best? |
|
I like List or View Manager personally, but don't have a strong preference! I think renaming this component makes sense in the context of this PR, and dropping it into the Column Management Modal should be a separate PR. |
| )} | ||
| wrapper={<DataList aria-label="Selected columns" isCompact data-ouia-component-id={`${ouiaId}-column-list`}/>} | ||
| /> | ||
| </DragDropSort> <div style={{ display: 'flex', justifyContent: 'normal', paddingTop: '1rem' }}> |
There was a problem hiding this comment.
The formatting is a little off here.
I recommend wrapping the buttons in an ActionList component to get the proper layout.
| import { DragDropSort, Droppable } from '@patternfly/react-drag-drop'; | ||
| import BulkSelect, { BulkSelectValue } from '../BulkSelect'; | ||
|
|
||
| export interface Column { |
There was a problem hiding this comment.
I think this may be better named something like 'ListManagerItem'
| /** The actual display name of the column possibly with a tooltip or icon. */ | ||
| title: React.ReactNode; | ||
| /** If user changes checkboxes, the component will send back column array with this property altered. */ | ||
| isShown?: boolean; |
There was a problem hiding this comment.
Are both isShown and isShownByDefault necessary?
Could the state of isShown be handled within the component?
For RHCLOUD-40372. A preview can be see in the comment below.