IA-2976: Remove SingleTAble from data sources

- Add react-query hooks
- remove redux fetching
- move table column config in hook
- remove FormattedMessage
- Force re-render of index.js via react-query key invalidation, i.o "forceRefresh" state value
- delete (now) unused request

hat/assets/js/apps/Iaso/constants/urls.ts

@@ -22,6 +22,7 @@ const orgUnitDetailsLinkParams = [
 ];
 export const FORMS_PREFIX = 'formsParams';
 export const LINKS_PREFIX = 'linksParams';
+export const LOGS_PREFIX = 'logsParams';
 
 export const CHANGE_REQUEST = 'changeRequest';
 const ORG_UNITS = 'orgunits';
@@ -141,7 +142,7 @@ export const baseRouteConfigs: Record<string, RouteConfig> = {
             ...orgUnitDetailsLinkParams,
             ...paginationPathParamsWithPrefix(LINKS_PREFIX),
             ...paginationPathParamsWithPrefix(FORMS_PREFIX),
-            ...paginationPathParamsWithPrefix('logsParams'),
+            ...paginationPathParamsWithPrefix(LOGS_PREFIX),
         ],
     },
     orgUnitsChangeRequest: {

hat/assets/js/apps/Iaso/domains/dataSources/components/AddNewEmptyVersion.tsx

@@ -10,13 +10,11 @@ type Props = {
     // eslint-disable-next-line no-unused-vars
     renderTrigger: ({ openDialog }: { openDialog: any }) => ReactNode;
     sourceId: number;
-    forceRefreshParent: () => void;
 };
 
 export const AddNewEmptyVersion: FunctionComponent<Props> = ({
     renderTrigger,
     sourceId,
-    forceRefreshParent,
 }) => {
     // eslint-disable-next-line no-unused-vars
     const [description, setDescription] = useState<string>('');
@@ -35,7 +33,6 @@ export const AddNewEmptyVersion: FunctionComponent<Props> = ({
         await createSourceVersion(body);
         closeDialogCallBack();
         reset();
-        forceRefreshParent();
     };
 
     const onConfirm = async (closeDialog: () => void) => {

hat/assets/js/apps/Iaso/domains/dataSources/components/DataSourceDialogComponent.js

@@ -7,7 +7,7 @@ import { merge } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import { useGetProjectsDropdownOptions } from '../../projects/hooks/requests.ts';
 import ConfirmCancelDialogComponent from '../../../components/dialogs/ConfirmCancelDialogComponent';
-import InputComponent from '../../../components/forms/InputComponent';
+import InputComponent from '../../../components/forms/InputComponent.tsx';
 import MESSAGES from '../messages';
 import { commaSeparatedIdsToArray } from '../../../utils/forms';
 import { useFormState } from '../../../hooks/form';
@@ -109,7 +109,6 @@ const formIsValid = form => {
 export const DataSourceDialogComponent = ({
     defaultSourceVersion,
     initialData,
-    onSuccess,
     renderTrigger,
     sourceCredentials,
 }) => {
@@ -123,8 +122,6 @@ export const DataSourceDialogComponent = ({
 
     const onConfirm = async closeDialog => {
         await saveDataSource(form);
-        // Notify parents to refetch. Remove if porting parent to react-query
-        onSuccess();
         closeDialog();
     };
 
@@ -314,7 +311,6 @@ DataSourceDialogComponent.defaultProps = {
     sourceCredentials: {},
 };
 DataSourceDialogComponent.propTypes = {
-    onSuccess: PropTypes.func.isRequired,
     initialData: PropTypes.object,
     renderTrigger: PropTypes.func.isRequired,
     defaultSourceVersion: PropTypes.object,

hat/assets/js/apps/Iaso/domains/dataSources/components/EditSourceVersion.tsx

@@ -14,7 +14,6 @@ type Props = {
     description: string | null;
     dataSourceId: number;
     sourceVersionNumber: number;
-    forceRefreshParent: () => void;
 };
 
 const renderTrigger = ({ openDialog }) => (
@@ -30,7 +29,6 @@ export const EditSourceVersion: FunctionComponent<Props> = ({
     description,
     sourceVersionNumber,
     dataSourceId,
-    forceRefreshParent,
 }) => {
     const { formatMessage } = useSafeIntl();
     const [updatedDescription, setUpdatedDescription] = useState<string | null>(
@@ -50,11 +48,9 @@ export const EditSourceVersion: FunctionComponent<Props> = ({
                 sourceVersionNumber,
             });
             closeDialog();
-            forceRefreshParent();
         },
         [
             dataSourceId,
-            forceRefreshParent,
             sourceVersionId,
             sourceVersionNumber,
             updateSourceVersion,

hat/assets/js/apps/Iaso/domains/dataSources/components/VersionsDialog.js

@@ -1,42 +1,31 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { useState, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import {
-    Button,
-    DialogActions,
-    Grid,
-    Tooltip,
-    Typography,
-} from '@mui/material';
+import { Button, DialogActions, Grid, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import Public from '@mui/icons-material/Public';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import AddBox from '@mui/icons-material/AddBoxOutlined';
 import { FormattedMessage } from 'react-intl';
 import {
     commonStyles,
     DHIS2Svg,
-    IconButton as IconButtonComponent,
     Table,
     useSafeIntl,
 } from 'bluesquare-components';
-// import 'react-table';
-import { CopySourceVersion } from './CopySourceVersion/CopySourceVersion.tsx';
-
 import DialogComponent from '../../../components/dialogs/DialogComponent';
 import MESSAGES from '../messages';
 import { AddTask } from './AddTaskComponent';
 import { ImportGeoPkgDialog } from './ImportGeoPkgDialog';
 import { AddNewEmptyVersion } from './AddNewEmptyVersion.tsx';
-import { DateTimeCell } from '../../../components/Cells/DateTimeCell.tsx';
-import { EditSourceVersion } from './EditSourceVersion.tsx';
+
 import {
     getSortedSourceVersions,
     handleSort,
     handleTableParamsChange,
     getTableParams,
     getTablePages,
 } from '../utils';
+import { useVersionsDialogTableColumns } from '../hooks/useVersionsDialogTableColumns.tsx';
 
 const useStyles = makeStyles(theme => ({
     spanStyle: {
@@ -45,130 +34,7 @@ const useStyles = makeStyles(theme => ({
     ...commonStyles(theme),
 }));
 
-const tableColumns = (source, forceRefreshParent) => [
-    {
-        Header: <FormattedMessage {...MESSAGES.defaultVersion} />,
-        accessor: 'id',
-        sortable: false,
-        Cell: settings =>
-            source.default_version?.id === settings.value && (
-                <Tooltip
-                    title={<FormattedMessage {...MESSAGES.defaultVersion} />}
-                >
-                    <CheckCircleIcon color="primary" />
-                </Tooltip>
-            ),
-    },
-    {
-        Header: (
-            <FormattedMessage
-                id="iaso.versionsDialog.label.number"
-                defaultMessage="Number"
-            />
-        ),
-        sortable: true,
-        accessor: 'number',
-    },
-    {
-        Header: (
-            <FormattedMessage
-                id="iaso.versionsDialog.label.createdAt"
-                defaultMessage="Created"
-            />
-        ),
-        accessor: 'created_at',
-        sortable: false,
-        Cell: DateTimeCell,
-    },
-    {
-        Header: (
-            <FormattedMessage
-                id="iaso.versionsDialog.label.updatedAt"
-                defaultMessage="Updated"
-            />
-        ),
-        accessor: 'updated_at',
-        sortable: false,
-        Cell: DateTimeCell,
-    },
-    {
-        Header: (
-            <FormattedMessage
-                id="iaso.label.orgUnit"
-                defaultMessage="Org units"
-            />
-        ),
-        accessor: 'org_units_count',
-    },
-    {
-        Header: (
-            <FormattedMessage
-                id="iaso.versionsDialog.label.description"
-                defaultMessage="Description"
-            />
-        ),
-        accessor: 'description',
-        sortable: false,
-    },
-    {
-        Header: (
-            <FormattedMessage
-                id="iaso.label.actions"
-                defaultMessage="Action(s)"
-            />
-        ),
-        accessor: 'actions',
-        sortable: false,
-        width: 200,
-        Cell: settings => {
-            return source.read_only ? (
-                <FormattedMessage id="Read Only" />
-            ) : (
-                <>
-                    <EditSourceVersion
-                        sourceVersionId={settings.row.original.id}
-                        description={settings.row.original.description}
-                        sourceVersionNumber={settings.row.original.number}
-                        dataSourceId={source.id}
-                        forceRefreshParent={forceRefreshParent}
-                    />
-                    <AddTask
-                        renderTrigger={({ openDialog }) => (
-                            <IconButtonComponent
-                                onClick={openDialog}
-                                icon="dhis"
-                                tooltipMessage={MESSAGES.updateFromDhis2}
-                            />
-                        )}
-                        sourceId={source.id}
-                        sourceVersionNumber={settings.row.original.number}
-                        sourceCredentials={source.credentials ?? {}}
-                    />
-                    <ImportGeoPkgDialog
-                        renderTrigger={({ openDialog }) => (
-                            <IconButtonComponent
-                                onClick={openDialog}
-                                icon="globe"
-                                tooltipMessage={MESSAGES.gpkgTooltip}
-                            />
-                        )}
-                        sourceId={source.id}
-                        sourceName={source.name}
-                        versionNumber={settings.row.original.number}
-                        projects={source.projects.flat()}
-                    />
-                    <CopySourceVersion
-                        dataSourceId={source.id}
-                        dataSourceVersionNumber={settings.row.original.number}
-                        dataSourceName={source.name}
-                    />
-                </>
-            );
-        },
-    },
-];
-
-const VersionsDialog = ({ renderTrigger, source, forceRefreshParent }) => {
+const VersionsDialog = ({ renderTrigger, source }) => {
     const { spanStyle, ...classes } = useStyles();
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(10);
@@ -180,6 +46,8 @@ const VersionsDialog = ({ renderTrigger, source, forceRefreshParent }) => {
     );
     const { formatMessage } = useSafeIntl();
 
+    const columns = useVersionsDialogTableColumns(source);
+
     const formatDataForTable = useCallback(
         (tableData, sortFunc) =>
             tableData
@@ -241,17 +109,14 @@ const VersionsDialog = ({ renderTrigger, source, forceRefreshParent }) => {
             renderActions={({ closeDialog }) => (
                 <DialogActions className={classes.action}>
                     <Button onClick={closeDialog} color="primary">
-                        <FormattedMessage
-                            id="iaso.label.close"
-                            defaultMessage="Close"
-                        />
+                        {formatMessage(MESSAGES.close)}
                     </Button>
                 </DialogActions>
             )}
         >
             <Table
                 data={sortedData}
-                columns={tableColumns(source, forceRefreshParent)}
+                columns={columns}
                 params={params}
                 page={page}
                 pages={pages}
@@ -313,7 +178,6 @@ const VersionsDialog = ({ renderTrigger, source, forceRefreshParent }) => {
                         </Button>
                     )}
                     sourceId={source.id}
-                    forceRefreshParent={forceRefreshParent}
                 />
             </Grid>
         </DialogComponent>
@@ -329,7 +193,6 @@ VersionsDialog.propTypes = {
         credentials: PropTypes.object,
         projects: PropTypes.array.isRequired,
     }).isRequired,
-    forceRefreshParent: PropTypes.func.isRequired,
 };
 VersionsDialog.defaultProps = {};