Merge branch 'develop'

Author: dolfinus

.github/workflows/release.yml

@@ -80,7 +80,7 @@ jobs:
                   sbom: true
 
             - name: Update DockerHub Description
-              uses: peter-evans/dockerhub-description@v4
+              uses: peter-evans/dockerhub-description@v5
               if: github.ref_type == 'tag'
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "data-rentgen",
-    "version": "0.4.0",
+    "version": "0.4.1",
     "private": true,
     "type": "module",
     "description": "Frontend for Data.Rentgen",
@@ -38,7 +38,7 @@
     },
     "devDependencies": {
         "@eslint/compat": "^1.4.0",
-        "@eslint/js": "^9.36.0",
+        "@eslint/js": "^9.37.0",
         "@rollup/plugin-alias": "^5.1.1",
         "@svgr/plugin-svgo": "^8.1.0",
         "@types/jest": "^29.5.14",
@@ -47,7 +47,7 @@
         "@types/react-dom": "^18.3.5",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@vitejs/plugin-react": "^4.7.0",
-        "eslint": "^9.36.0",
+        "eslint": "^9.37.0",
         "eslint-plugin-compat": "^6.0.2",
         "eslint-plugin-react": "^7.37.4",
         "husky": "^9.1.7",

package.json

@@ -1,37 +1,20 @@
 import { ReactElement } from "react";
-import {
-    List,
-    TextField,
-    DatagridConfigurable,
-    SearchInput,
-    minLength,
-    useTranslate,
-} from "react-admin";
+import { List, TextField, DatagridConfigurable } from "react-admin";
 import { ListActions } from "@/components/base";
 import {
     LocationRaNameWithLinkField,
     LocationRaTypeWithIconField,
 } from "@/components/location";
+import DatasetRaListFilters from "./DatasetRaListFilters";
 
 const DatasetRaList = (): ReactElement => {
-    const translate = useTranslate();
-
-    const datasetFilters = [
-        <SearchInput
-            key="search_query"
-            source="search_query"
-            alwaysOn
-            validate={minLength(3)}
-            placeholder={translate(
-                "resources.datasets.filters.search_query.placeholder",
-            )}
-        />,
-    ];
-
     return (
         <List
-            actions={<ListActions />}
-            filters={datasetFilters}
+            actions={
+                <ListActions>
+                    <DatasetRaListFilters />
+                </ListActions>
+            }
             resource="datasets"
             storeKey={false}
         >

src/components/dataset/DatasetRaList.tsx

@@ -0,0 +1,37 @@
+import { FilterLiveForm, minLength } from "react-admin";
+
+import { Box, InputAdornment } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import { TextInput } from "react-admin";
+import { LocationRaTypeFilter } from "@/components/location";
+
+const DatasetRaListFilters = () => {
+    return (
+        <FilterLiveForm>
+            <Box display="flex" alignItems="flex-end">
+                <Box component="span" mr={2} sx={{ flex: "0.2" }}>
+                    <LocationRaTypeFilter />
+                </Box>
+
+                <Box component="span" mr={2} sx={{ flex: "0.3 1 1" }}>
+                    {/* Not using SearchInput here because it doesn't match styles with other filters */}
+                    <TextInput
+                        source="search_query"
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <SearchIcon color="disabled" />
+                                </InputAdornment>
+                            ),
+                        }}
+                        validate={minLength(3)}
+                        label="resources.datasets.filters.search_query.label"
+                        helperText="resources.datasets.filters.search_query.helperText"
+                    />
+                </Box>
+            </Box>
+        </FilterLiveForm>
+    );
+};
+
+export default DatasetRaListFilters;

src/components/dataset/DatasetRaListFilters.tsx

@@ -1,70 +1,43 @@
-import { minLength, useTranslate } from "react-admin";
+import { FilterLiveForm, minLength, useTranslate } from "react-admin";
 
-import { useForm, FormProvider } from "react-hook-form";
 import { Box, Button, InputAdornment } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
-import { TextInput, useListContext } from "react-admin";
-import { useEffect } from "react";
+import { TextInput } from "react-admin";
 import JobTypeRaFilter from "./JobRaTypeFilter";
-
-type JobRaListFilterValues = {
-    job_type?: string[];
-    search_query?: string;
-};
+import { LocationRaTypeFilter } from "../location";
 
 const JobRaListFilters = () => {
     const translate = useTranslate();
-    const { filterValues, setFilters } = useListContext();
-    const form = useForm({ defaultValues: filterValues });
-
-    const submit = form.handleSubmit((formValues: JobRaListFilterValues) => {
-        if (Object.keys(formValues).length > 0) {
-            setFilters(formValues);
-        }
-    });
-
-    // fill up filters just after opening the page
-    useEffect(() => {
-        submit();
-    }, []);
 
     return (
-        <FormProvider {...form}>
-            <form onSubmit={submit}>
-                <Box display="flex" alignItems="flex-end">
-                    <Box component="span" mr={2}>
-                        <JobTypeRaFilter />
-                    </Box>
+        <FilterLiveForm>
+            <Box display="flex" alignItems="flex-end">
+                <Box component="span" mr={2} sx={{ flex: "0.2" }}>
+                    <LocationRaTypeFilter />
+                </Box>
 
-                    <Box component="span" mr={2} sx={{ flex: "0.3 1 1" }}>
-                        {/* Not using SearchInput here because it doesn't match styles with other filters */}
-                        <TextInput
-                            source="search_query"
-                            InputProps={{
-                                endAdornment: (
-                                    <InputAdornment position="end">
-                                        <SearchIcon color="disabled" />
-                                    </InputAdornment>
-                                ),
-                            }}
-                            validate={minLength(3)}
-                            label="resources.jobs.filters.search_query.label"
-                            helperText="resources.jobs.filters.search_query.helperText"
-                        />
-                    </Box>
+                <Box component="span" mr={2} sx={{ flex: "0.2" }}>
+                    <JobTypeRaFilter />
+                </Box>
 
-                    <Box component="span" mb={4}>
-                        <Button
-                            variant="outlined"
-                            color="primary"
-                            type="submit"
-                        >
-                            {translate("resources.jobs.filters.apply_button")}
-                        </Button>
-                    </Box>
+                <Box component="span" mr={2} sx={{ flex: "0.3 1 1" }}>
+                    {/* Not using SearchInput here because it doesn't match styles with other filters */}
+                    <TextInput
+                        source="search_query"
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <SearchIcon color="disabled" />
+                                </InputAdornment>
+                            ),
+                        }}
+                        validate={minLength(3)}
+                        label="resources.jobs.filters.search_query.label"
+                        helperText="resources.jobs.filters.search_query.helperText"
+                    />
                 </Box>
-            </form>
-        </FormProvider>
+            </Box>
+        </FilterLiveForm>
     );
 };
 

src/components/job/JobRaListFilters.tsx

@@ -27,6 +27,15 @@ type LineageFilterValues = {
     granularity?: string;
     include_column_lineage?: boolean;
 };
+type LineageFilterKeys = keyof LineageFilterValues;
+const lineageFilterKeys: LineageFilterKeys[] = [
+    "since",
+    "until",
+    "depth",
+    "direction",
+    "granularity",
+    "include_column_lineage",
+];
 
 type LineageFiltersProps = {
     onSubmit: (values: LineageFilterValues) => void;
@@ -76,10 +85,20 @@ const LineageFilters = ({
         granularities.includes(choice.id),
     );
 
-    const submit = form.handleSubmit((formValues: LineageFilterValues) => {
-        listParamsActions.setFilters(formValues);
-        onSubmit(formValues);
-    });
+    const submit = form.handleSubmit(
+        (formValues: LineageFilterValues & { [key: string]: any }) => {
+            const keys = Object.keys(formValues);
+            const validKeys = lineageFilterKeys.filter((key) =>
+                keys.includes(key),
+            );
+            const validValues = validKeys.reduce(
+                (acc, key) => ({ ...acc, [key]: formValues[key] }),
+                {},
+            );
+            listParamsActions.setFilters(validValues);
+            onSubmit(validValues);
+        },
+    );
 
     // draw lineage just after opening the page
     useEffect(() => {

src/components/lineage/LineageFilters.tsx

@@ -3,34 +3,21 @@ import {
     List,
     TextField,
     DatagridConfigurable,
-    SearchInput,
-    minLength,
-    useTranslate,
     WithRecord,
     WrapperField,
 } from "react-admin";
 import { ListActions } from "@/components/base";
 import LocationIconWithType from "./LocationIconWithType";
+import LocationRaListFilters from "./LocationRaListFilters";
 
 const LocationRaList = (): ReactElement => {
-    const translate = useTranslate();
-
-    const locationFilters = [
-        <SearchInput
-            key="search_query"
-            source="search_query"
-            alwaysOn
-            validate={minLength(3)}
-            placeholder={translate(
-                "resources.locations.filters.search_query.placeholder",
-            )}
-        />,
-    ];
-
     return (
         <List
-            actions={<ListActions />}
-            filters={locationFilters}
+            actions={
+                <ListActions>
+                    <LocationRaListFilters />
+                </ListActions>
+            }
             resource="locations"
             storeKey={false}
         >

src/components/location/LocationRaList.tsx

@@ -0,0 +1,37 @@
+import { FilterLiveForm, minLength } from "react-admin";
+
+import { Box, InputAdornment } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import { TextInput } from "react-admin";
+import LocationRaTypeFilter from "./LocationRaTypeFilter";
+
+const LocationRaListFilters = () => {
+    return (
+        <FilterLiveForm>
+            <Box display="flex" alignItems="flex-end">
+                <Box component="span" mr={2} sx={{ flex: "0.2" }}>
+                    <LocationRaTypeFilter />
+                </Box>
+
+                <Box component="span" mr={2} sx={{ flex: "0.5 1 1" }}>
+                    {/* Not using SearchInput here because it doesn't match styles with other filters */}
+                    <TextInput
+                        source="search_query"
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <SearchIcon color="disabled" />
+                                </InputAdornment>
+                            ),
+                        }}
+                        validate={minLength(3)}
+                        label="resources.locations.filters.search_query.label"
+                        helperText="resources.locations.filters.search_query.helperText"
+                    />
+                </Box>
+            </Box>
+        </FilterLiveForm>
+    );
+};
+
+export default LocationRaListFilters;

src/components/location/LocationRaListFilters.tsx

@@ -0,0 +1,40 @@
+import { LocationTypesResponseV1 } from "@/dataProvider/types";
+import { ReactElement, useEffect, useState } from "react";
+import { SelectArrayInput, useDataProvider, useTranslate } from "react-admin";
+import { getDefaultLocationType } from "./LocationType";
+
+const LocationRaTypeFilter = (): ReactElement => {
+    const dataProvider = useDataProvider();
+    const translate = useTranslate();
+
+    const [locationTypes, setLocationTypes] = useState<string[]>([]);
+
+    useEffect(() => {
+        dataProvider
+            .getLocationTypes({})
+            .then((response: LocationTypesResponseV1) => {
+                setLocationTypes(response.location_types);
+            });
+    }, [dataProvider]);
+
+    const locationTypesRepr = locationTypes.map((locationType) => {
+        return {
+            id: locationType,
+            name: translate(
+                `resources.locations.types.${locationType.toLocaleLowerCase()}`,
+                { _: getDefaultLocationType(locationType) },
+            ),
+        };
+    });
+
+    return (
+        <SelectArrayInput
+            source="location_type"
+            choices={locationTypesRepr}
+            label="resources.locations.filters.location_type.label"
+            helperText="resources.locations.filters.location_type.helperText"
+        />
+    );
+};
+
+export default LocationRaTypeFilter;