You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Submissions views show the contributions a user has submitted. The user can switch between the table and card view using the view toggle in the toolbar.
Submission table row
Each row displays the most important information about a submission and lets them take action on that submission.
Submission card
Each card displays the most important information about a submission and lets them take action on that submission.
Table columns/ Compact form labels
Title of submission (Link displays submission form in overlay drawer) + Submission summary
Submission type (Knowledge or Skill)
Status (Pending review, Approved, Rejected)
Last updated
View in GitHub (Links opens GitHub PR in new browser tab)
Actions (Kebab icon groups a set of actions: Edit, Download YAML, Download Attribution, and Delete)
Responsive layout
When the user shrinks the screen the table changes to a compact form, and the toolbar will display a dropdown menu containing sorting options.
Details drawer
When the user clicks on a row in the submissions table or on a card the primary-detail drawer expands to display the details of the submission form in read-only format.
@Misjohns In case there is no existing skill and knowledge contribution, do we want to show the existing empty screen with instructlab logo and link to skill/knowledge/chat?
This is related to Improve submission table #99
Improvements to the My Submission table/card view
The Submissions views show the contributions a user has submitted. The user can switch between the table and card view using the view toggle in the toolbar.
Submission table row
![Image](https://private-user-images.githubusercontent.com/97301019/406241739-8aee002d-3195-4a69-9210-b1b382527e6e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5ODQxOTMsIm5iZiI6MTczODk4Mzg5MywicGF0aCI6Ii85NzMwMTAxOS80MDYyNDE3MzktOGFlZTAwMmQtMzE5NS00YTY5LTkyMTAtYjFiMzgyNTI3ZTZlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDAzMDQ1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTYyYmU0ZGQ2YWFmMTNhOWZiODA2NWI5NWFkMTc0YzlmNmZiZDIyMzRiY2U0ZTNhNTU3NWQ0NmFlM2Q4ZWMwMzkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.1RGSOnAyT2pKs3DJYkes2jKS4Vfhbnyx_rfy4e02n1c)
Each row displays the most important information about a submission and lets them take action on that submission.
Submission card
![Image](https://private-user-images.githubusercontent.com/97301019/406227491-e736bc97-17ce-443d-a1e2-1235590f6a71.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5ODQxOTMsIm5iZiI6MTczODk4Mzg5MywicGF0aCI6Ii85NzMwMTAxOS80MDYyMjc0OTEtZTczNmJjOTctMTdjZS00NDNkLWExZTItMTIzNTU5MGY2YTcxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDAzMDQ1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTkyMDY1YzcwNzQ2Y2MxNTAwNjMxNGMxZGY1MzZhMTE0M2M0NGFmNzM2MWE3MTAwZjRkNTVkZjFjY2ZkOTVjZDkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.Lu5HQLUmCRwUCWsZNuBvDrlWqggcu_VmoFTP9VobkB4)
Each card displays the most important information about a submission and lets them take action on that submission.
Table columns/ Compact form labels
Responsive layout
![Image](https://private-user-images.githubusercontent.com/97301019/406216142-759ac7f7-2ffa-42fc-9776-4d72785c8d9e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5ODQxOTMsIm5iZiI6MTczODk4Mzg5MywicGF0aCI6Ii85NzMwMTAxOS80MDYyMTYxNDItNzU5YWM3ZjctMmZmYS00MmZjLTk3NzYtNGQ3Mjc4NWM4ZDllLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDAzMDQ1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE2Nzk4MTVhYTUwYzMwZTkxMjg2Yzc5MmUzYWQ1MWUwZTM4MTcyZjg5MWU4YTI5YjYwZDI4MTc1YjBjNGFkNDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.MI1MuDQQ8h1chXlaYwcbG5SMgqTRRoEe0T-6PiCDEOk)
When the user shrinks the screen the table changes to a compact form, and the toolbar will display a dropdown menu containing sorting options.
Details drawer
![Image](https://private-user-images.githubusercontent.com/97301019/406240090-6abef400-cf18-4f3d-abdd-e3502facce14.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5ODQxOTMsIm5iZiI6MTczODk4Mzg5MywicGF0aCI6Ii85NzMwMTAxOS80MDYyNDAwOTAtNmFiZWY0MDAtY2YxOC00ZjNkLWFiZGQtZTM1MDJmYWNjZTE0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDAzMDQ1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRhYTYwNGY0ZWU3ZDJiYTg1YTg3MzZjZGE5ODgyZDNkNmU3NWNhOTg4YzdlZjAzMzg2Y2EwNTY4MmY3NmVhMTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.d20xrrDcn2RIALLFlaybPcf2gRDRSTzHj6p4Wp3tG9Y)
When the user clicks on a row in the submissions table or on a card the primary-detail drawer expands to display the details of the submission form in read-only format.
Reference:
https://www.patternfly.org/patterns/primary-detail/react-demos/primary-detail-full-page/
https://www.patternfly.org/components/table/react-demos/sortable---responsive/
https://www.patternfly.org/components/table#cell-width-breakpoint-modifiers
https://www.patternfly.org/components/table
https://www.patternfly.org/components/card/design-guidelines#cards-in-catalog-views
The text was updated successfully, but these errors were encountered: