add action to create dataset from project page

src/webapp/components/dataset-table/DataSetTable.tsx

@@ -10,9 +10,8 @@ import { EditOrgUnits } from "$/webapp/components/edit-orgunits/EditOrgUnits";
 import { DataSetLogs } from "$/webapp/components/dataset-logs/DataSetLogs";
 import { HomeTabs } from "$/webapp/components/home-tabs/HomeTabs";
 import { Maybe } from "$/utils/ts-utils";
-import { useDeleteDataSets } from "$/webapp/hooks/useDataSets";
+import { useDataSetsRoutes, useDeleteDataSets } from "$/webapp/hooks/useDataSets";
 import { useTableConfig } from "$/webapp/components/dataset-table/DataSetTableConfig";
-import { useNavigateTo } from "$/webapp/routes";
 import { DataSetDetails } from "$/webapp/components/dataset-table/DataSetDetails";
 
 export type DataSetColumns = DataSetAttrs & { permissionDescription: string };
@@ -33,11 +32,11 @@ export const DataSetTable: React.FC = React.memo(() => {
     const [refreshTable, setRefreshTable] = React.useState(0);
     const [tableAction, setTableAction] = React.useState<TableAction>();
 
-    const navigateTo = useNavigateTo();
     const snackbar = useSnackbar();
     const action = getSelectedAction(tableAction);
     const selectedIds = getSelectedIds(tableAction);
     const tableConfig = useTableConfig({ onAction: setTableAction, refreshTable });
+    const { goToCreateDataSet } = useDataSetsRoutes();
 
     const clearTableAction = React.useCallback((refreshTable?: boolean) => {
         setTableAction(undefined);
@@ -63,10 +62,6 @@ export const DataSetTable: React.FC = React.memo(() => {
         setTableAction(undefined);
     }, []);
 
-    const goToCreateDataSet = React.useCallback(() => {
-        navigateTo("createDataSets");
-    }, [navigateTo]);
-
     const renderActions = () => {
         switch (action) {
             case "remove":

src/webapp/components/projects/ProjectTable.tsx

@@ -13,6 +13,7 @@ import i18n from "$/utils/i18n";
 import { TooltipTruncate } from "$/webapp/components/tooltip-truncate/TooltipTruncate";
 import { useAppContext } from "$/webapp/contexts/app-context";
 import { parseSortField } from "$/utils/parse-sort-field";
+import { useDataSetsRoutes } from "$/webapp/hooks/useDataSets";
 
 type ProjectColumns = ProjectAttrs & { orgUnits: string; coreCompetencies: string };
 
@@ -24,6 +25,7 @@ export const ProjectTable = React.memo(() => {
     const { compositionRoot } = useAppContext();
     const loading = useLoading();
     const snackbar = useSnackbar();
+    const { goToCreateDataSet } = useDataSetsRoutes();
 
     const tableConfig = useObjectsTable<ProjectColumns>(
         React.useMemo(() => {
@@ -90,8 +92,9 @@ export const ProjectTable = React.memo(() => {
                 paginationOptions: { pageSizeInitialValue: 50, pageSizeOptions: [50, 100, 200] },
                 searchBoxLabel: i18n.t("Search"),
                 childrenKeys: ["dataSets"],
+                onActionButtonClick: goToCreateDataSet,
             };
-        }, []),
+        }, [goToCreateDataSet]),
         React.useCallback(
             (search, pagination, sorting) => {
                 loading.show(true, i18n.t("Loading projects..."));

src/webapp/hooks/useDataSets.ts

@@ -5,6 +5,7 @@ import { DataSet } from "$/domain/entities/DataSet";
 import { Id } from "$/domain/entities/Ref";
 import i18n from "$/utils/i18n";
 import { useAppContext } from "$/webapp/contexts/app-context";
+import { useNavigateTo } from "$/webapp/routes";
 
 export function useGetDataSetsByIds(ids: Id[]) {
     const { compositionRoot } = useAppContext();
@@ -89,4 +90,14 @@ export function useDeleteDataSets(props: DeleteDataSetsProps) {
     return { deleteDataSets };
 }
 
+export function useDataSetsRoutes() {
+    const navigateTo = useNavigateTo();
+
+    const goToCreateDataSet = React.useCallback(() => {
+        navigateTo("createDataSets");
+    }, [navigateTo]);
+
+    return { goToCreateDataSet };
+}
+
 type DeleteDataSetsProps = { ids: Id[]; onError: (message: string) => void; onSuccess: () => void };