[DOP-27446] Allow to filter datatasets & jobs by tags

src/components/dataset/DatasetRaList.tsx

@@ -1,11 +1,12 @@
 import { ReactElement } from "react";
-import { List, TextField, DatagridConfigurable } from "react-admin";
+import { List, TextField, DatagridConfigurable, ArrayField } from "react-admin";
 import { ListActions } from "@/components/base";
 import {
     LocationRaNameWithLinkField,
     LocationRaTypeWithIconField,
 } from "@/components/location";
 import DatasetRaListFilters from "./DatasetRaListFilters";
+import DatasetRaTag from "./DatasetRaTag";
 
 const DatasetRaList = (): ReactElement => {
     return (
@@ -34,6 +35,12 @@ const DatasetRaList = (): ReactElement => {
                     label="resources.datasets.fields.name"
                     sortable={false}
                 />
+                <ArrayField
+                    source="data.tags"
+                    label="resources.datasets.fields.tags"
+                >
+                    <DatasetRaTag />
+                </ArrayField>
             </DatagridConfigurable>
         </List>
     );

src/components/dataset/DatasetRaListFilters.tsx

@@ -4,6 +4,7 @@ import { Box, InputAdornment } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import { TextInput } from "react-admin";
 import { LocationRaTypeFilter } from "@/components/location";
+import TagsRaFilter from "@/components/tag/TagsRaFilter";
 
 const DatasetRaListFilters = ({
     withLocationType = true,
@@ -14,12 +15,31 @@ const DatasetRaListFilters = ({
         <FilterLiveForm>
             <Box display="flex" alignItems="flex-end">
                 {withLocationType && (
-                    <Box component="span" mr={2} sx={{ flex: "0.2" }}>
+                    <Box
+                        component="span"
+                        mr={2}
+                        sx={{ flex: "0.2", minWidth: "50px" }}
+                    >
                         <LocationRaTypeFilter />
                     </Box>
                 )}
 
-                <Box component="span" mr={2} sx={{ flex: "0.3 1 1" }}>
+                <Box
+                    component="span"
+                    mr={2}
+                    sx={{ flex: "0.3", minWidth: "50px" }}
+                >
+                    <TagsRaFilter
+                        label="resources.datasets.filters.tags.label"
+                        helperText="resources.datasets.filters.tags.helperText"
+                    />
+                </Box>
+
+                <Box
+                    component="span"
+                    mr={2}
+                    sx={{ flex: "0.3", minWidth: "50px" }}
+                >
                     {/* Not using SearchInput here because it doesn't match styles with other filters */}
                     <TextInput
                         source="search_query"

src/components/dataset/DatasetRaListForLocation.tsx

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { ListActions } from "@/components/base";
-import { List, TextField, DatagridConfigurable } from "react-admin";
+import { List, TextField, DatagridConfigurable, ArrayField } from "react-admin";
 import DatasetRaListFilters from "./DatasetRaListFilters";
+import DatasetRaTag from "./DatasetRaTag";
 
 const DatasetRaListForLocation = ({
     locationId,
@@ -26,6 +27,12 @@ const DatasetRaListForLocation = ({
                     label="resources.datasets.fields.name"
                     sortable={false}
                 />
+                <ArrayField
+                    source="data.tags"
+                    label="resources.datasets.fields.tags"
+                >
+                    <DatasetRaTag />
+                </ArrayField>
             </DatagridConfigurable>
         </List>
     );

src/components/job/JobRaList.tsx

@@ -1,12 +1,13 @@
 import { ReactElement } from "react";
-import { List, TextField, DatagridConfigurable } from "react-admin";
+import { List, TextField, DatagridConfigurable, ArrayField } from "react-admin";
 import { ListActions } from "@/components/base";
 import {
     LocationRaNameWithLinkField,
     LocationRaTypeWithIconField,
 } from "@/components/location";
 import JobRaTypeField from "./JobRaTypeField";
 import JobRaListFilters from "./JobRaListFilters";
+import JobRaTag from "./JobRaTag";
 
 const JobRaList = (): ReactElement => {
     return (
@@ -38,6 +39,12 @@ const JobRaList = (): ReactElement => {
                     source="data.location.name"
                     label="resources.locations.fields.name"
                 />
+                <ArrayField
+                    source="data.tags"
+                    label="resources.jobs.fields.tags"
+                >
+                    <JobRaTag />
+                </ArrayField>
             </DatagridConfigurable>
         </List>
     );

src/components/job/JobRaListFilters.tsx

@@ -5,6 +5,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import { TextInput } from "react-admin";
 import JobTypeRaFilter from "./JobRaTypeFilter";
 import { LocationRaTypeFilter } from "../location";
+import TagsRaFilter from "@/components/tag/TagsRaFilter";
 
 const JobRaListFilters = ({
     withLocationType = true,
@@ -24,7 +25,22 @@ const JobRaListFilters = ({
                     <JobTypeRaFilter />
                 </Box>
 
-                <Box component="span" mr={2} sx={{ flex: "0.3 1 1" }}>
+                <Box
+                    component="span"
+                    mr={2}
+                    sx={{ flex: "0.3", minWidth: "50px" }}
+                >
+                    <TagsRaFilter
+                        label="resources.jobs.filters.tags.label"
+                        helperText="resources.jobs.filters.tags.helperText"
+                    />
+                </Box>
+
+                <Box
+                    component="span"
+                    mr={2}
+                    sx={{ flex: "0.3", minWidth: "50px" }}
+                >
                     {/* Not using SearchInput here because it doesn't match styles with other filters */}
                     <TextInput
                         source="search_query"

src/components/job/JobRaListForLocation.tsx

@@ -1,9 +1,10 @@
 import { ReactElement } from "react";
 
 import { ListActions } from "@/components/base";
-import { List, TextField, DatagridConfigurable } from "react-admin";
+import { List, TextField, DatagridConfigurable, ArrayField } from "react-admin";
 import JobRaTypeField from "./JobRaTypeField";
 import JobRaListFilters from "./JobRaListFilters";
+import JobRaTag from "./JobRaTag";
 
 const JobRaListForLocation = ({
     locationId,
@@ -32,6 +33,12 @@ const JobRaListForLocation = ({
                     label="resources.jobs.fields.name"
                     sortable={false}
                 />
+                <ArrayField
+                    source="data.tags"
+                    label="resources.jobs.fields.tags"
+                >
+                    <JobRaTag />
+                </ArrayField>
             </DatagridConfigurable>
         </List>
     );

src/components/tag/TagsRaFilter.tsx

@@ -0,0 +1,69 @@
+import { TagDetailedResponseV1 } from "@/dataProvider/types";
+import { useMemo, useState } from "react";
+import {
+    useGetList,
+    AutocompleteArrayInput,
+    AutocompleteArrayInputProps,
+} from "react-admin";
+
+type TagsRaFilterProps = Omit<
+    AutocompleteArrayInputProps,
+    | "source"
+    | "choices"
+    | "value"
+    | "optionValue"
+    | "optionText"
+    | "onChange"
+    | "isPending"
+    | "loading"
+    | "onInputChange"
+    | "shouldRenderSuggestions"
+>;
+
+const TagsRaFilter = (props: TagsRaFilterProps) => {
+    const [searchQuery, setSearchQuery] = useState<string>("");
+    const [selectedTagValues, setSelectedTagValues] =
+        useState<TagDetailedResponseV1[]>();
+
+    const tagFilter =
+        searchQuery.length > 2 ? { search_query: searchQuery } : {};
+
+    const { data, isPending, isLoading } = useGetList<TagDetailedResponseV1>(
+        "tags",
+        { filter: tagFilter },
+    );
+
+    const tagValues = useMemo(
+        () =>
+            data?.flatMap((tag) => {
+                const tagInfo = tag;
+                return (
+                    tag.data.values.map((tagValue) => ({
+                        label: `${tagInfo.data.name}:${tagValue.value}`,
+                        ...tagValue,
+                    })) ?? []
+                );
+            }),
+        [data],
+    );
+
+    return (
+        <AutocompleteArrayInput
+            source="tag_value_id"
+            choices={tagValues}
+            value={selectedTagValues}
+            optionValue="id"
+            optionText="label"
+            isPending={isPending}
+            loading={isLoading}
+            onChange={(value) => setSelectedTagValues(value)}
+            onInputChange={(_e, value) => setSearchQuery(value)}
+            shouldRenderSuggestions={(val: string) => {
+                return val.trim().length === 0 || val.trim().length > 2;
+            }}
+            {...props}
+        />
+    );
+};
+
+export default TagsRaFilter;

src/dataProvider/types.ts

@@ -44,6 +44,11 @@ interface TagResponseV1 {
     values: TagValueResponseV1[];
 }
 
+interface TagDetailedResponseV1 {
+    id: string;
+    data: TagResponseV1;
+}
+
 interface DatasetResponseV1 extends RaRecord {
     id: string;
     type: string;
@@ -338,5 +343,6 @@ export type {
     PersonalTokenDetailedResponseV1,
     PersonalTokenCreateDetailedResponseV1,
     TagResponseV1,
+    TagDetailedResponseV1,
     TagValueResponseV1,
 };

src/i18n/en.ts

@@ -58,11 +58,11 @@ const customEnglishMessages: TranslationMessages = {
             filters: {
                 location_type: {
                     label: "Location Type",
-                    helperText: "Only selected",
+                    helperText: "With any of selected types",
                 },
                 search_query: {
                     label: "Search",
-                    helperText: "Filter by name or address",
+                    helperText: "Search by name or address",
                 },
             },
             tabs: {
@@ -88,7 +88,7 @@ const customEnglishMessages: TranslationMessages = {
                     },
                     search: {
                         name: "Search",
-                        placeholder: "Filter by name",
+                        placeholder: "Search by name",
                     },
                     pagination: {
                         all: "All",
@@ -101,11 +101,15 @@ const customEnglishMessages: TranslationMessages = {
             filters: {
                 location_type: {
                     label: "Location Type",
-                    helperText: "Only selected",
+                    helperText: "With location type",
                 },
                 search_query: {
                     label: "Search",
-                    helperText: "Filter by name or address",
+                    helperText: "Search by name or address",
+                },
+                tags: {
+                    label: "Tags",
+                    helperText: "With all selected tags",
                 },
             },
         },
@@ -134,15 +138,19 @@ const customEnglishMessages: TranslationMessages = {
             filters: {
                 location_type: {
                     label: "Location Type",
-                    helperText: "Only selected",
+                    helperText: "With any location types",
                 },
                 job_type: {
                     label: "Job Type",
-                    helperText: "Only selected",
+                    helperText: "With any job types",
                 },
                 search_query: {
                     label: "Search",
-                    helperText: "Filter by name or address",
+                    helperText: "Search by name or address",
+                },
+                tags: {
+                    label: "Tags",
+                    helperText: "With all tags",
                 },
             },
         },
@@ -211,7 +219,7 @@ const customEnglishMessages: TranslationMessages = {
                 },
                 status: {
                     label: "Status",
-                    helperText: "Only selected",
+                    helperText: "With status",
                 },
                 started_by_user: {
                     label: "Started by user",
@@ -220,7 +228,7 @@ const customEnglishMessages: TranslationMessages = {
                 search_query: {
                     label: "Search",
                     helperText:
-                        "Filter by external ID (including partial match)",
+                        "Search by external ID (including partial match)",
                 },
                 apply_button: "Apply",
             },