Display additional properties on Form tab (#60)

* display card with additional properties added via json

Author: stephenkilbourn

__tests__/components/JSONEditor.test.tsx

@@ -84,17 +84,20 @@ const mockFormData = {
 describe('JSONEditor', () => {
   let mockOnChange: Mock;
   let mockSetHasJSONChanges: Mock;
+  let mockSetAdditionalProperties: Mock;
   let defaultProps: any;
 
   beforeEach(() => {
     mockOnChange = vi.fn();
     mockSetHasJSONChanges = vi.fn();
+    mockSetAdditionalProperties = vi.fn();
     defaultProps = {
       value: mockFormData,
       onChange: mockOnChange,
       disableCollectionNameChange: false,
       hasJSONChanges: true,
       setHasJSONChanges: mockSetHasJSONChanges,
+      setAdditionalProperties: mockSetAdditionalProperties,
     };
   });
 

__tests__/playwright/CreateIngestPage.test.tsx

@@ -218,9 +218,21 @@ test.describe('Create Ingest Page', () => {
         body: JSONScreenshot,
         contentType: 'image/png',
       });
+
       await page.getByRole('button', { name: /apply changes/i }).click();
     });
 
+    await expect(
+      page.getByTestId('extra-properties-card').getByText('extraField'),
+      'verify that extra properties are displayed on the form tab'
+    ).toBeVisible();
+
+    const extraPropertiesScreenshot = await page.screenshot({ fullPage: true });
+    testInfo.attach('extra properties listed on form tab', {
+      body: extraPropertiesScreenshot,
+      contentType: 'image/png',
+    });
+
     await test.step('submit form and validate that POST body values match pasted config values including extra field', async () => {
       await page.getByRole('button', { name: /submit/i }).click();
     });

components/IngestForm.tsx

@@ -3,7 +3,8 @@
 import '@ant-design/v5-patch-for-react-19';
 
 import { SetStateAction, useEffect, useState } from 'react';
-import { Tabs } from 'antd';
+import { Card, Tabs } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { withTheme } from '@rjsf/core';
 import { Theme as AntDTheme } from '@rjsf/antd';
 import validator from '@rjsf/validator-ajv8';
@@ -53,6 +54,9 @@ function IngestForm({
   const [activeTab, setActiveTab] = useState<string>('form');
   const [forceRenderKey, setForceRenderKey] = useState<number>(0); // Force refresh RJSF to clear validation errors
   const [hasJSONChanges, setHasJSONChanges] = useState<boolean>(false);
+  const [additionalProperties, setAdditionalProperties] = useState<
+    string[] | null
+  >(null);
 
   useEffect(() => {
     if (defaultTemporalExtent) {
@@ -114,47 +118,94 @@ function IngestForm({
   };
 
   return (
-    <Tabs
-      activeKey={activeTab}
-      onChange={setActiveTab}
-      items={[
-        {
-          key: 'form',
-          label: 'Form',
-          children: (
-            <Form
-              key={forceRenderKey} // Forces re-render when data updates
-              schema={jsonSchema as JSONSchema7}
-              uiSchema={uiSchema}
-              validator={validator}
-              customValidate={customValidate}
-              templates={{
-                ObjectFieldTemplate: ObjectFieldTemplate,
-              }}
-              formData={formData}
-              onChange={onFormDataChanged}
-              onSubmit={(data) => handleSubmit(data, onSubmit)}
-              formContext={{ updateFormData }}
-            >
-              {children}
-            </Form>
-          ),
-        },
-        {
-          key: 'json',
-          label: 'Manual JSON Edit',
-          children: (
-            <JSONEditor
-              value={formData || {}}
-              onChange={handleJsonEditorChange}
-              disableCollectionNameChange={disableCollectionNameChange}
-              hasJSONChanges={hasJSONChanges}
-              setHasJSONChanges={setHasJSONChanges}
-            />
-          ),
-        },
-      ]}
-    />
+    <>
+      <Tabs
+        activeKey={activeTab}
+        onChange={setActiveTab}
+        items={[
+          {
+            key: 'form',
+            label: 'Form',
+            children: (
+              <>
+                <Form
+                  key={forceRenderKey} // Forces re-render when data updates
+                  schema={jsonSchema as JSONSchema7}
+                  uiSchema={uiSchema}
+                  validator={validator}
+                  customValidate={customValidate}
+                  templates={{
+                    ObjectFieldTemplate: ObjectFieldTemplate,
+                  }}
+                  formData={formData}
+                  onChange={onFormDataChanged}
+                  onSubmit={(data) => handleSubmit(data, onSubmit)}
+                  formContext={{ updateFormData }}
+                >
+                  {children}
+                </Form>
+                {additionalProperties && additionalProperties.length > 0 && (
+                  <Card
+                    data-testid="extra-properties-card"
+                    title={
+                      <div
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '8px',
+                          color: '#faad14',
+                        }}
+                      >
+                        <ExclamationCircleOutlined />
+                        <span>Extra Properties set via JSON Editor</span>
+                      </div>
+                    }
+                    style={{
+                      width: '100%',
+                      marginTop: '10px',
+                      maxHeight: '300px',
+                      overflowY: 'auto',
+                    }}
+                  >
+                    <ul
+                      style={{
+                        display: 'grid',
+                        gridTemplateRows: 'repeat(3, auto)', // 3 rows before wrapping to new column
+                        gridAutoFlow: 'column',
+                        gap: '10px',
+                        padding: 0,
+                        listStyleType: 'none',
+                      }}
+                    >
+                      {additionalProperties.map((prop) => (
+                        <li key={prop} style={{ paddingLeft: '10px' }}>
+                          {prop}
+                        </li>
+                      ))}
+                    </ul>
+                  </Card>
+                )}
+              </>
+            ),
+          },
+          {
+            key: 'json',
+            label: 'Manual JSON Edit',
+            children: (
+              <JSONEditor
+                value={formData || {}}
+                onChange={handleJsonEditorChange}
+                disableCollectionNameChange={disableCollectionNameChange}
+                hasJSONChanges={hasJSONChanges}
+                setHasJSONChanges={setHasJSONChanges}
+                additionalProperties={additionalProperties}
+                setAdditionalProperties={setAdditionalProperties}
+              />
+            ),
+          },
+        ]}
+      />
+    </>
   );
 }
 

components/JSONEditor.tsx

@@ -23,6 +23,8 @@ interface JSONEditorProps {
   disableCollectionNameChange?: boolean;
   hasJSONChanges?: boolean;
   setHasJSONChanges: (hasJSONChanges: boolean) => void;
+  additionalProperties: string[] | null;
+  setAdditionalProperties: (additionalProperties: string[] | null) => void;
 }
 
 const JSONEditor: React.FC<JSONEditorProps> = ({
@@ -31,6 +33,8 @@ const JSONEditor: React.FC<JSONEditorProps> = ({
   hasJSONChanges,
   setHasJSONChanges,
   disableCollectionNameChange = false,
+  additionalProperties,
+  setAdditionalProperties,
 }) => {
   const [editorValue, setEditorValue] = useState<string>(
     JSON.stringify(value, null, 2)
@@ -136,6 +140,17 @@ const JSONEditor: React.FC<JSONEditorProps> = ({
       const validateSchema = ajv.compile(modifiedSchema);
 
       const isValid = validateSchema(parsedValue);
+      // Extract additional properties manually when strictSchema is false
+      if (!strictSchema && typeof parsedValue === 'object') {
+        const schemaProperties = Object.keys(modifiedSchema.properties || {});
+        const userProperties = Object.keys(parsedValue);
+        const extraProps = userProperties.filter(
+          (prop) => !schemaProperties.includes(prop)
+        );
+
+        setAdditionalProperties(extraProps.length > 0 ? extraProps : null);
+      }
+
       if (!isValid) {
         setSchemaErrors(
           validateSchema.errors?.map((err) =>