Add Related Resources Card

Author: Paul Howells

plugins/catalog-dataset/src/components/CatalogDataset/CatalogDatasetPage.tsx

@@ -17,6 +17,7 @@ import { LineageAndQualityCard } from './LineageAndQualityCard';
 import { VersioningAndChangeGovernanceCard } from './VersioningAndChangeGovernanceCard';
 import { SupportCard } from './SupportCard';
 import { DatasetApisDialog } from './DatasetApisDialog';
+import { RelatedResourcesCard } from './RelatedResourcesCard';
 
 export const CatalogDatasetPage = () => {
   const { entity } = useEntity();
@@ -120,6 +121,10 @@ export const CatalogDatasetPage = () => {
               />
 
               <SupportCard support={spec.support} />
+
+              <RelatedResourcesCard
+                relatedResources={spec.relatedResources}
+              />
             </Grid>
           </Grid>
 

plugins/catalog-dataset/src/components/CatalogDataset/RelatedResourcesCard.tsx

@@ -0,0 +1,54 @@
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  Link,
+} from '@material-ui/core';
+
+type RelatedResource = {
+  url: string;
+  title?: string;
+};
+
+type Props = {
+  relatedResources?: RelatedResource[];
+};
+
+export const RelatedResourcesCard = ({
+  relatedResources,
+}: Props) => {
+  return (
+    <Card
+      style={{
+        borderRadius: 8,
+        marginBottom: 16,
+        border: '2px solid rgba(0,0,0,0.23)',
+      }}
+      variant="outlined"
+    >
+      <CardHeader title="Related resources" />
+      <CardContent>
+        {relatedResources?.length ? (
+          <ul style={{ margin: 0, paddingLeft: 20 }}>
+            {relatedResources.map(resource => (
+              <li key={`${resource.url}-${resource.title ?? ''}`}>
+                <Typography variant="body2">
+                  <Link
+                    href={resource.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {resource.title ?? resource.url}
+                  </Link>
+                </Typography>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <Typography variant="body2">No related resources defined.</Typography>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

plugins/catalog-dataset/src/components/CatalogDataset/SchemaCard.tsx

@@ -8,6 +8,7 @@ import {
   TableRow,
   TableCell,
   TableBody,
+  Link,
 } from '@material-ui/core';
 
 type SchemaField = {
@@ -123,6 +124,12 @@ export const SchemaCard = ({ tables }: Props) => {
         ) : (
           <Typography variant="body2">No schema available.</Typography>
         )}
+                        <Link
+                          href="https://www.notimplemented.net/"
+                          target="_blank"
+                        >
+                          {'Download schema'}
+                        </Link>
       </CardContent>
     </Card>
   );

plugins/catalog-dataset/src/components/CatalogDataset/SupportCard.tsx

@@ -103,12 +103,12 @@ export const SupportCard = ({ support }: Props) => {
         <ul style={{ margin: '0 0 8px 0', paddingLeft: 20 }}>
           <li>
             <Typography variant="body2">
-              {support?.dataCustodian ?? 'N/A'}
+              Data Custodian: {support?.dataCustodian ?? 'N/A'}
             </Typography>
           </li>
           <li>
             <Typography variant="body2">
-              {support?.governanceAuthority ?? 'N/A'}
+              Governance Authority: {support?.governanceAuthority ?? 'N/A'}
             </Typography>
           </li>
         </ul>