feat(Metadata): enhance metadata handling to include data types and licenses

Author: sanjaypinna

app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx

@@ -1,6 +1,7 @@
+import React, { useState } from 'react';
 import Image from 'next/image';
+import Link from 'next/link';
 import { Button, Divider, Icon, Text } from 'opub-ui';
-import React, { useState } from 'react';
 
 import { Icons } from '@/components/icons';
 
@@ -10,24 +11,42 @@ interface MetadataProps {
 }
 
 const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
-
-  const Metadata = (
-    data.metadata as Array<{ metadataItem: { label: string }; value: string }>
-  )
-    .filter((item) =>
-      ['Geography', 'Update Frequency', 'License'].includes(
-        item.metadataItem.label
-      )
-    )
-    .map((item) => ({
-      label:
-        item.metadataItem.label === 'Geography'
-          ? 'Location'
-          : item.metadataItem.label,
-      value: item.value,
-    }));
+  const Metadata = data.metadata.map((item: any) => ({
+    label: item.metadataItem.label,
+    value: item.value,
+    type: item.metadataItem.dataType,
+  }));
   const [isexpanded, setIsexpanded] = useState(false);
   const toggleDescription = () => setIsexpanded(!isexpanded);
+
+  const licenseOptions = [
+    {
+      label: 'Government Open Data License',
+      value: 'GOVERNMENT_OPEN_DATA_LICENSE',
+    },
+    {
+      label: 'CC BY 4.0 (Attribution)',
+      value: 'CC_BY_4_0_ATTRIBUTION',
+    },
+    {
+      label: 'CC BY-SA 4.0 (Attribution-ShareAlike)',
+      value: 'CC_BY_SA_4_0_ATTRIBUTION_SHARE_ALIKE',
+    },
+    {
+      label: 'Open Data Commons By Attribution',
+      value: 'OPEN_DATA_COMMONS_BY_ATTRIBUTION',
+    },
+    {
+      label: 'Open Database License',
+      value: 'OPEN_DATABASE_LICENSE',
+    },
+  ];
+
+  const getLicenseLabel = (value: string): string => {
+    const option = licenseOptions.find((option) => option.value === value);
+    return option ? option.label : value; // fallback to value if no match
+  };
+
   return (
     <div className="flex flex-col gap-10">
       <div className=" flex items-center justify-between">
@@ -51,7 +70,7 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
       </div>
       <Divider />
       <div className=" flex flex-col gap-8">
-        <div className=" rounded-2 border-1 border-solid border-greyExtralight p-2 hidden lg:block">
+        <div className=" hidden rounded-2 border-1 border-solid border-greyExtralight p-2 lg:block">
           {data?.organization?.logo?.url ? (
             <Image
               height={140}
@@ -94,19 +113,35 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
             {data.sectors[0].name}
           </Text>
         </div>
-        {Metadata.map((item, index) => (
+        {Metadata.map((item: any, index: any) => (
           <div className="flex items-center gap-2 " key={index}>
             <Text
               className="min-w-[120px]  basis-1/4 uppercase"
               variant="bodyMd"
             >
               {item.label}
             </Text>
-            <Text className="max-w-xs " variant="bodyLg" fontWeight="medium">
-              {item.value}
-            </Text>
+            {item.type !== 'URL' ? (
+              <Text className="max-w-xs " variant="bodyLg" fontWeight="medium">
+                {item.value}
+              </Text>
+            ) : (
+              <Link href={item.value} target="_blank">
+                <Text className="underline" color="highlight">
+                  Source
+                </Text>
+              </Link>
+            )}
           </div>
         ))}
+        <div className="flex items-center gap-2 ">
+          <Text className="min-w-[120px]  basis-1/4 uppercase" variant="bodyMd">
+            License
+          </Text>
+          <Text className="" variant="bodyLg" fontWeight="medium">
+            {getLicenseLabel(data.license)}
+          </Text>
+        </div>
         <div className="flex flex-col gap-4">
           <Text variant="bodyMd">Description</Text>
           <Text variant="bodyMd">

app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx

@@ -30,9 +30,11 @@ const datasetQuery: any = graphql(`
         metadataItem {
           id
           label
+          dataType
         }
         value
       }
+      license
       resources {
         id
         created