[DOP-27824] add dataset tags (#71)

* [DOP-27824] add dataset tags

* [DOP-27824] add types

* [DOP-27824] add sort for stabel order

* [DOP-27824] change type annotations

* [DOP-27824] change type annotations

Author: TiGrib

src/components/dataset/DatasetRaShow.tsx

@@ -4,13 +4,14 @@ import {
     SimpleShowLayout,
     TextField,
     TabbedShowLayout,
-    WithRecord,
+    ArrayField,
 } from "react-admin";
 import {
     LocationRaNameWithLinkField,
     LocationRaTypeWithIconField,
 } from "@/components/location";
 import DatasetRaLineage from "./DatasetRaLineage";
+import DatasetRaTag from "./DatasetRaTag";
 
 const DatasetRaShow = (): ReactElement => {
     return (
@@ -33,6 +34,12 @@ const DatasetRaShow = (): ReactElement => {
                     source="data.name"
                     label="resources.datasets.fields.name"
                 />
+                <ArrayField
+                    source="data.tags"
+                    label="resources.datasets.fields.tags"
+                >
+                    <DatasetRaTag />
+                </ArrayField>
 
                 <TabbedShowLayout>
                     <TabbedShowLayout.Tab label="resources.datasets.tabs.lineage">

src/components/dataset/DatasetRaTag.tsx

@@ -0,0 +1,28 @@
+import { useRecordContext } from "react-admin";
+import { DatasetDetailedResponseV1 } from "@/dataProvider/types";
+import { Stack, Chip, Box } from "@mui/material";
+
+const DatasetRaTag = () => {
+    const record: DatasetDetailedResponseV1 | undefined = useRecordContext();
+    if (!record) {
+        return null;
+    }
+    return (
+        <Stack spacing={1}>
+            {record.data.tags
+                .sort((a, b) => a.name.localeCompare(b.name))
+                .map((tag, index) => (
+                    <Box key={index} sx={{ width: "fit-content" }}>
+                        <Chip
+                            label={`${tag.name}: ${tag.value}`}
+                            size="small"
+                            variant="outlined"
+                            sx={{ fontSize: "0.7rem" }}
+                        ></Chip>
+                    </Box>
+                ))}
+        </Stack>
+    );
+};
+
+export default DatasetRaTag;

src/components/dataset/index.ts

@@ -1,5 +1,6 @@
 import DatasetRaShow from "./DatasetRaShow";
 import DatasetRaList from "./DatasetRaList";
 import DatasetRaRepr from "./DatasetRaRepr";
+import DatasetRaTag from "./DatasetRaTag";
 
-export { DatasetRaShow, DatasetRaList, DatasetRaRepr };
+export { DatasetRaShow, DatasetRaList, DatasetRaRepr, DatasetRaTag };

src/dataProvider/types.ts

@@ -29,10 +29,16 @@ interface LocationDetailedResponseV1 {
     statistics: LocationStatisticsResponseV1;
 }
 
+interface TagsResponseV1 {
+    name: string;
+    value: string;
+}
+
 interface DatasetResponseV1 extends RaRecord {
     id: string;
     type: string;
     name: string;
+    tags: TagsResponseV1[];
     location: LocationResponseV1;
 }
 

src/i18n/en.ts

@@ -69,6 +69,7 @@ const customEnglishMessages: TranslationMessages = {
             fields: {
                 id: "Internal ID",
                 name: "Dataset name",
+                tags: "Tags",
                 schema: {
                     exact_match: "Schema projection",
                     latest_known: "Schema projection (latest)",

src/i18n/ru.ts

@@ -69,6 +69,7 @@ const customRussianMessages: TranslationMessages = {
             fields: {
                 id: "Внутренний идентификатор",
                 name: "Имя датасета",
+                tags: "Теги",
                 schema: {
                     exact_match: "Проекция схемы",
                     latest_known: "Проекция схемы (последняя)",