Skip to content

Commit 3c4d31e

Browse files
ibolton336ibolton336
authored
✨ Introducing ActionsColumn Component in Assessment Table (#1314)
- This PR introduces the ActionsColumn component in the assessment table <img width="274" alt="Screenshot 2023-08-24 at 9 48 38 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/ebd66b9a-f2f2-4856-810c-e684bc550b15"> Signed-off-by: ibolton336 <[email protected]>
1 parent 5d784c8 commit 3c4d31e

File tree

1 file changed

+105
-144
lines changed

1 file changed

+105
-144
lines changed

‎client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx

+105-144
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ import {
3333
Tbody,
3434
Td,
3535
TableText,
36+
ActionsColumn,
37+
CustomActionsToggleProps,
3638
} from "@patternfly/react-table";
3739

3840
// @app components and utilities
@@ -632,153 +634,112 @@ export const ApplicationsTable: React.FC = () => {
632634
}
633635
numRenderedColumns={numRenderedColumns}
634636
>
635-
<Tbody>
636-
{currentPageItems?.map((application, rowIndex) => {
637-
return (
638-
<Tr
639-
style={{ cursor: "pointer" }}
640-
key={application.name}
641-
{...getClickableTrProps({ item: application })}
637+
{currentPageItems?.map((application, rowIndex) => {
638+
return (
639+
<Tr
640+
style={{ cursor: "pointer" }}
641+
key={application.name}
642+
{...getClickableTrProps({ item: application })}
643+
>
644+
<TableRowContentWithControls
645+
{...tableControls}
646+
item={application}
647+
rowIndex={rowIndex}
642648
>
643-
<TableRowContentWithControls
644-
{...tableControls}
645-
item={application}
646-
rowIndex={rowIndex}
649+
<Td
650+
width={20}
651+
{...getTdProps({ columnKey: "name" })}
652+
modifier="truncate"
647653
>
648-
<Td
649-
width={20}
650-
{...getTdProps({ columnKey: "name" })}
651-
modifier="truncate"
652-
>
653-
{application.name}
654-
</Td>
655-
<Td
656-
width={25}
657-
{...getTdProps({ columnKey: "description" })}
658-
modifier="truncate"
659-
>
660-
{application.description}
661-
</Td>
662-
<Td
663-
width={10}
664-
modifier="truncate"
665-
{...getTdProps({ columnKey: "businessService" })}
666-
>
667-
{application.businessService && (
668-
<ApplicationBusinessService
669-
id={application.businessService.id}
670-
/>
671-
)}
672-
</Td>
673-
<Td
674-
width={10}
675-
modifier="truncate"
676-
{...getTdProps({ columnKey: "assessment" })}
677-
>
678-
<ApplicationAssessmentStatus
679-
assessment={getApplicationAssessment(application.id!)}
680-
isLoading={isLoadingApplicationAssessment(
681-
application.id!
682-
)}
683-
fetchError={fetchErrorApplicationAssessment(
684-
application.id!
685-
)}
686-
/>
687-
</Td>
688-
<Td
689-
width={10}
690-
modifier="truncate"
691-
{...getTdProps({ columnKey: "review" })}
692-
>
693-
<IconedStatus
694-
preset={
695-
application.review ? "Completed" : "NotStarted"
696-
}
654+
{application.name}
655+
</Td>
656+
<Td
657+
width={25}
658+
{...getTdProps({ columnKey: "description" })}
659+
modifier="truncate"
660+
>
661+
{application.description}
662+
</Td>
663+
<Td
664+
width={10}
665+
modifier="truncate"
666+
{...getTdProps({ columnKey: "businessService" })}
667+
>
668+
{application.businessService && (
669+
<ApplicationBusinessService
670+
id={application.businessService.id}
697671
/>
698-
</Td>
699-
<Td
700-
width={10}
701-
modifier="truncate"
702-
{...getTdProps({ columnKey: "tags" })}
703-
>
704-
<TagIcon />
705-
{application.tags ? application.tags.length : 0}
706-
</Td>
707-
<Td width={20}>
708-
<RBAC
709-
allowedPermissions={applicationsWriteScopes}
710-
rbacType={RBAC_TYPE.Scope}
711-
>
712-
<Button
713-
type="button"
714-
variant="plain"
715-
onClick={() =>
716-
setSaveApplicationModalState(application)
717-
}
718-
>
719-
<PencilAltIcon />
720-
</Button>
721-
</RBAC>
722-
<Dropdown
723-
isOpen={isKebabOpen === application.id}
724-
onSelect={() => setIsKebabOpen(null)}
725-
onOpenChange={(_isOpen) => setIsKebabOpen(null)}
726-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
727-
<MenuToggle
728-
ref={toggleRef}
729-
aria-label="kebab dropdown toggle"
730-
variant="plain"
731-
onClick={() =>
732-
isKebabOpen
733-
? setIsKebabOpen(null)
734-
: setIsKebabOpen(application.id)
735-
}
736-
isExpanded={isKebabOpen === rowIndex}
737-
>
738-
<EllipsisVIcon />
739-
</MenuToggle>
740-
)}
741-
shouldFocusToggleOnSelect
742-
>
743-
<DropdownItem
744-
key="assess"
745-
component="button"
746-
onClick={() => assessSelectedApp(application)}
747-
>
748-
{t("actions.assess")}
749-
</DropdownItem>
750-
<DropdownItem
751-
key="review"
752-
component="button"
753-
onClick={() => reviewSelectedApp(application)}
754-
>
755-
{t("actions.review")}
756-
</DropdownItem>
757-
<DropdownItem
758-
key="delete"
759-
component="button"
760-
onClick={() =>
761-
setApplicationsToDelete([application])
762-
}
763-
>
764-
{t("actions.delete")}
765-
</DropdownItem>
766-
<DropdownItem
767-
key="manage-dependencies"
768-
component="button"
769-
onClick={() => {
770-
setApplicationDependenciesToManage(application);
771-
}}
772-
>
773-
{t("actions.manageDependencies")}
774-
</DropdownItem>
775-
</Dropdown>
776-
</Td>
777-
</TableRowContentWithControls>
778-
</Tr>
779-
);
780-
})}
781-
</Tbody>
672+
)}
673+
</Td>
674+
<Td
675+
width={10}
676+
modifier="truncate"
677+
{...getTdProps({ columnKey: "assessment" })}
678+
>
679+
<ApplicationAssessmentStatus
680+
assessment={getApplicationAssessment(application.id!)}
681+
isLoading={isLoadingApplicationAssessment(
682+
application.id!
683+
)}
684+
fetchError={fetchErrorApplicationAssessment(
685+
application.id!
686+
)}
687+
/>
688+
</Td>
689+
<Td
690+
width={10}
691+
modifier="truncate"
692+
{...getTdProps({ columnKey: "review" })}
693+
>
694+
<IconedStatus
695+
preset={application.review ? "Completed" : "NotStarted"}
696+
/>
697+
</Td>
698+
<Td
699+
width={10}
700+
modifier="truncate"
701+
{...getTdProps({ columnKey: "tags" })}
702+
>
703+
<TagIcon />
704+
{application.tags ? application.tags.length : 0}
705+
</Td>
706+
<Td isActionCell>
707+
<Button
708+
variant="plain"
709+
icon={<PencilAltIcon />}
710+
onClick={() =>
711+
setSaveApplicationModalState(application)
712+
}
713+
/>
714+
</Td>
715+
<Td isActionCell>
716+
<ActionsColumn
717+
items={[
718+
{
719+
title: t("actions.assess"),
720+
onClick: () => assessSelectedApp(application),
721+
},
722+
{
723+
title: t("actions.review"),
724+
onClick: () => reviewSelectedApp(application),
725+
},
726+
{
727+
title: t("actions.delete"),
728+
onClick: () =>
729+
setApplicationsToDelete([application]),
730+
},
731+
{
732+
title: t("actions.manageDependencies"),
733+
onClick: () =>
734+
setApplicationDependenciesToManage(application),
735+
},
736+
]}
737+
/>
738+
</Td>
739+
</TableRowContentWithControls>
740+
</Tr>
741+
);
742+
})}
782743
</ConditionalTableBody>
783744
</Table>
784745
<SimplePagination

0 commit comments

Comments
 (0)