✨ Add actions kebab to archetypes table with stub dropdown items (#1328)

Part of #1264. Uses the ActionsColumn component pattern introduced in #1314 to add a kebab menu for actions shown in [this mockup](https://www.sketch.com/s/af50e991-8061-4b69-84c1-c11241e274f2/a/eldjjKW). All 3 actions are currently stubs to unblock @sjd78 from integrating his Edit functionality. PR to implement Duplicate and Delete will be next. Follows the pattern found in this PF example for "danger" menu items (red text below a separator): https://www.patternfly.org/components/menus/menu#danger-menu-item --------- Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu>
konveyor · Sep 5, 2023 · 9287edd · 9287edd
1 parent 0a9dded
commit 9287edd
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -31,6 +31,7 @@
     "discardAssessment": "Discard assessment/review",
     "downloadCsvTemplate": "Download CSV template",
     "download": "Download {{what}}",
+    "duplicate": "Duplicate",
     "edit": "Edit",
     "export": "Export",
     "filterBy": "Filter by {{what}}",

diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -18,7 +18,15 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from "@patternfly/react-core";
-import { Table, Tbody, Th, Thead, Tr, Td } from "@patternfly/react-table";
+import {
+  Table,
+  Tbody,
+  Th,
+  Thead,
+  Tr,
+  Td,
+  ActionsColumn,
+} from "@patternfly/react-table";
 import { CubesIcon } from "@patternfly/react-icons";
 
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
@@ -202,7 +210,26 @@ const Archetypes: React.FC = () => {
                         <Td {...getTdProps({ columnKey: "applications" })}>
                           <ArchetypeApplicationsColumn archetype={archetype} />
                         </Td>
-                        <Td>{/* TODO: Add kebab action menu */}</Td>
+                        <Td isActionCell>
+                          <ActionsColumn
+                            items={[
+                              {
+                                title: t("actions.duplicate"),
+                                onClick: () => alert("TODO"),
+                              },
+                              {
+                                title: t("actions.edit"),
+                                onClick: () => alert("TODO"),
+                              },
+                              { isSeparator: true },
+                              {
+                                title: t("actions.delete"),
+                                onClick: () => alert("TODO"),
+                                isDanger: true,
+                              },
+                            ]}
+                          />
+                        </Td>
                       </TableRowContentWithControls>
                     </Tr>
                   </Tbody>