feat: add additional information links to related tables

#563

functions/common/config.js

@@ -35,6 +35,7 @@ import { array, string } from 'yup';
 /**
  * @typedef {{
  *   'Additional Information': string;
+ *   'Additional Information Link Fields': string[];
  *   'Feature Service': string;
  *   'Grid Fields': (string | { name: string; alias: string })[];
  *   'OID Field': string;
@@ -192,6 +193,11 @@ export const fieldConfigs = {
       name: 'Additional Information',
       schema: string().matches(urlRegex, { message: invalidUrl }).nullable(),
     },
+    additionalInformationLinkFields: {
+      name: 'Additional Information Link Fields',
+      scheme: array().nullable(),
+      transform: transformFields,
+    },
     featureService: {
       name: 'Feature Service',
       schema: string().url().required(),

functions/configs.js

@@ -434,7 +434,7 @@ export async function main() {
   checkForDuplicateTableNames(queryLayers);
 
   const relatedTables = await getConfigs(
-    "'Related Tables'!A:H",
+    "'Related Tables'!A:I",
     ['Source Data'],
     authClient,
     fieldConfigs.relatedTables,

src/components/Identify.jsx

@@ -14,11 +14,12 @@ const urlRegex = /^https?:\/\/\S*$/;
 
 /**
  * @param {Object} props
- * @param {?(string | number)} props.value
+ * @param {() => ?(string | number)} props.getValue
  * @returns {?(JSX.Element | string | number)}
  */
-function Cell({ value }) {
+export function LinkDetectingCell({ getValue }) {
   // if this is a link, return an anchor tag
+  const value = getValue();
   if (typeof value === 'string' && urlRegex.test(value)) {
     return (
       <Link external href={value}>
@@ -57,7 +58,7 @@ function Identify(
     {
       accessorKey: 'value',
       size: 50,
-      cell: (cellProps) => <Cell value={cellProps.getValue()}></Cell>,
+      cell: LinkDetectingCell,
     },
   ];
 

src/components/RelatedRecords.jsx

@@ -8,6 +8,7 @@ import { getAlias, getConfigByTableName } from '../utils';
 import SimpleTable from '../utah-design-system/SimpleTable';
 import { useCallback, useEffect, useState } from 'react';
 import Tag from './Tag';
+import { LinkDetectingCell } from './Identify';
 
 /**
  * @param {Object} props
@@ -116,16 +117,40 @@ function TabContent({
       searchParams: params,
     }).json();
 
+    const columns = childConfig[fieldNames.relatedTables.gridFields].map(
+      (value) => ({
+        header: value.alias || getAlias(value, featureServiceJson.fields),
+        accessorKey: value.name || value,
+        cell: LinkDetectingCell,
+      }),
+    );
+    const rows = relatedRecords.features.map((feature) => feature.attributes);
+    const additionalInfoUrl =
+      childConfig[fieldNames.relatedTables.additionalInformation]?.trim();
+
+    if (additionalInfoUrl) {
+      const additionalInfoFields =
+        childConfig[fieldNames.relatedTables.additionalInformationLinkFields];
+
+      for (const row of rows) {
+        row.additionalInfoLink = `${additionalInfoUrl}&${additionalInfoFields
+          .map((field) => `${field}=${row[field]}`)
+          .join('&')}`;
+      }
+
+      // columns
+      columns.splice(2, 0, {
+        header: 'Additional Information',
+        accessorKey: 'additionalInfoLink',
+        cell: LinkDetectingCell,
+      });
+    }
+
     return {
       childTableName,
       tabName: childConfig[fieldNames.relatedTables.tabName],
-      rows: relatedRecords.features.map((feature) => feature.attributes),
-      columns: childConfig[fieldNames.relatedTables.gridFields].map(
-        (value) => ({
-          header: value.alias || getAlias(value, featureServiceJson.fields),
-          accessorKey: value.name || value,
-        }),
-      ),
+      rows,
+      columns,
     };
   }