Move additional properties card to component and use for errors (#61)

* make card with additional properties component. use for errors, too

Author: stephenkilbourn

__tests__/components/JSONEditor.test.tsx

@@ -267,7 +267,7 @@ describe('JSONEditor', () => {
     await userEvent.click(applyButton);
 
     await waitFor(() =>
-      expect(screen.getByText('Schema Validation Errors:')).toBeInTheDocument()
+      expect(screen.getByText('Schema Validation Errors')).toBeInTheDocument()
     );
 
     expect(mockOnChange).not.toHaveBeenCalled();
@@ -285,7 +285,7 @@ describe('JSONEditor', () => {
     await userEvent.click(applyButton);
 
     await waitFor(() =>
-      expect(screen.getByText('Schema Validation Errors:')).toBeInTheDocument()
+      expect(screen.getByText('Schema Validation Errors')).toBeInTheDocument()
     );
   });
 

__tests__/playwright/CreateIngestPage.test.tsx

@@ -262,7 +262,7 @@ test.describe('Create Ingest Page', () => {
     await test.step('paste a JSON not matching required schema in the editor and check for error message', async () => {
       await page.getByTestId('json-editor').fill('{"validJSON": true}');
       await page.getByRole('button', { name: /apply changes/i }).click();
-      await expect(page.getByText('Schema Validation Errors:')).toBeVisible();
+      await expect(page.getByText('Schema Validation Errors')).toBeVisible();
       const requiredProperties = [
         'collection',
         'title',

components/AdditionalPropertyCard.tsx

@@ -0,0 +1,83 @@
+import { Card, theme, Typography } from 'antd';
+import {
+  ExclamationCircleOutlined,
+  CloseCircleOutlined,
+} from '@ant-design/icons';
+
+const { useToken } = theme;
+
+function AdditionalPropertyCard({
+  additionalProperties,
+  style,
+}: {
+  additionalProperties: string[] | null;
+  style: 'warning' | 'error';
+}) {
+  const { token } = useToken();
+
+  if (!additionalProperties) return null;
+
+  const styleConfig = {
+    warning: {
+      title: 'Extra Properties set via JSON Editor',
+      icon: <ExclamationCircleOutlined />,
+      textColor: token.colorWarningText,
+    },
+    error: {
+      title: 'Schema Validation Errors',
+      icon: <CloseCircleOutlined />,
+      textColor: token.colorErrorText,
+    },
+  };
+
+  const { title, icon, textColor } = styleConfig[style];
+
+  return (
+    <Card
+      data-testid="extra-properties-card"
+      title={
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            color: textColor,
+          }}
+        >
+          {icon}
+          <span>{title}</span>
+        </div>
+      }
+      style={{
+        width: '100%',
+        marginTop: '10px',
+        maxHeight: '300px',
+        overflowY: 'auto',
+        backgroundColor: '#f5f5f5',
+        boxShadow: '0px 3px 15px rgba(0, 0, 0, 0.2)',
+        borderRadius: '8px',
+      }}
+    >
+      <ul
+        style={{
+          display: 'grid',
+          gridTemplateRows: 'repeat(3, auto)',
+          gridAutoFlow: 'column',
+          gap: '10px',
+          padding: 0,
+          listStyleType: 'none',
+        }}
+      >
+        {additionalProperties.map((prop) => (
+          <li key={prop} style={{ paddingLeft: '10px' }}>
+            <Typography.Text style={{ color: textColor, fontSize: '16px' }}>
+              {prop}
+            </Typography.Text>
+          </li>
+        ))}
+      </ul>
+    </Card>
+  );
+}
+
+export default AdditionalPropertyCard;

components/IngestForm.tsx

@@ -17,6 +17,7 @@ import { customValidate } from '@/utils/CustomValidation';
 import { handleSubmit } from '@/utils/FormHandlers';
 import JSONEditor from '@/components/JSONEditor';
 import { JSONEditorValue } from '@/components/JSONEditor';
+import AdditionalPropertyCard from '@/components/AdditionalPropertyCard';
 
 const Form = withTheme(AntDTheme);
 
@@ -143,45 +144,10 @@ function IngestForm({
                 {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>
+                <AdditionalPropertyCard
+                  additionalProperties={additionalProperties}
+                  style="warning"
+                />
               )}
             </>
           ),

components/JSONEditor.tsx

@@ -3,6 +3,7 @@ import { Input, Button, Typography, Checkbox, Flex, message } from 'antd';
 import Ajv from 'ajv';
 import addFormats from 'ajv-formats';
 import jsonSchema from '@/FormSchemas/jsonschema.json';
+import AdditionalPropertyCard from '@/components/AdditionalPropertyCard';
 
 const { TextArea } = Input;
 const { Text } = Typography;
@@ -204,16 +205,10 @@ const JSONEditor: React.FC<JSONEditorProps> = ({
 
       {jsonError && <Text type="danger">{jsonError}</Text>}
       {schemaErrors.length > 0 && (
-        <div style={{ marginTop: '10px' }}>
-          <Text type="danger">Schema Validation Errors:</Text>
-          <ul>
-            {schemaErrors.map((error, index) => (
-              <li key={index}>
-                <Text type="danger">{error}</Text>
-              </li>
-            ))}
-          </ul>
-        </div>
+        <AdditionalPropertyCard
+          additionalProperties={schemaErrors}
+          style="error"
+        />
       )}
     </Flex>
   );