Merge pull request #89 from headwirecom/issue/53-error-icons-for-array

create an ErrorIndicator component and reuse it in the table array renderer

Author: mburri

packages/spectrum/src/additional/ArrayLayoutToolbar.tsx

@@ -29,16 +29,15 @@
 
 import {
   ActionButton,
-  Button,
   Flex,
   Heading,
   Tooltip,
   TooltipTrigger,
   View,
 } from '@adobe/react-spectrum';
 import Add from '@spectrum-icons/workflow/Add';
-import AlertCircle from '@spectrum-icons/workflow/AlertCircle';
 import React from 'react';
+import { ErrorIndicator } from '../components/ErrorIndicator';
 
 export interface ArrayLayoutToolbarProps {
   label: string;
@@ -60,18 +59,7 @@ export const ArrayLayoutToolbar = React.memo(
         <Heading level={4}>{label}</Heading>
         <View isHidden={errors.length !== 0} marginEnd='auto' />
         <View isHidden={errors.length === 0} marginEnd='auto'>
-          <TooltipTrigger delay={0}>
-            <Button
-              isQuiet
-              variant='negative'
-              margin='size-50'
-              minWidth='size-0'
-              width='size-10'
-            >
-              <AlertCircle color='negative' />
-            </Button>
-            <Tooltip>{errors}</Tooltip>
-          </TooltipTrigger>
+          <ErrorIndicator errors={errors} />
         </View>
         <View>
           <TooltipTrigger delay={0}>

packages/spectrum/src/complex/SpectrumTableArrayControl.tsx

@@ -54,7 +54,6 @@ import {
 import {
   ActionButton,
   AlertDialog,
-  Button,
   DialogTrigger,
   Flex,
   Header,
@@ -70,7 +69,7 @@ import './table-cell.css';
 import Add from '@spectrum-icons/workflow/Add';
 import Delete from '@spectrum-icons/workflow/Delete';
 import { ErrorObject } from 'ajv';
-import AlertCircle from '@spectrum-icons/workflow/AlertCircle';
+import { ErrorIndicator } from '../components/ErrorIndicator';
 
 const { createLabelDescriptionFrom } = Helpers;
 
@@ -104,13 +103,11 @@ class SpectrumTableArrayControl extends React.Component<
       path,
       data,
       visible,
-      errors,
       label,
       childErrors,
     } = this.props;
 
     const controlElement = uischema as ControlElement;
-
     const createControlElement = (key?: string): ControlElement => ({
       type: 'Control',
       label: false,
@@ -132,8 +129,8 @@ class SpectrumTableArrayControl extends React.Component<
 
     const getChildErrorMessage = getError(childErrors);
     const labelObject = createLabelDescriptionFrom(controlElement, schema);
-    const isValid = errors.length === 0;
     const labelText = isPlainLabel(label) ? label : label.default;
+    const allErrorsMessages = childErrors.map((e) => e.message).join(' ');
 
     const UNSAFE_error = {
       color: 'rgb(215, 55, 63)',
@@ -159,21 +156,9 @@ class SpectrumTableArrayControl extends React.Component<
             justifyContent='space-between'
           >
             <Heading level={4}>{labelText}</Heading>
-            <View isHidden={!isValid} marginEnd='auto' />
-            <View isHidden={isValid} marginEnd='auto'>
-              <TooltipTrigger delay={0}>
-                <Button
-                  isQuiet
-                  aria-label='validation'
-                  variant='negative'
-                  margin='size-50'
-                  minWidth='size-0'
-                  width='size-10'
-                >
-                  <AlertCircle color='negative' />
-                </Button>
-                <Tooltip>{errors}</Tooltip>
-              </TooltipTrigger>
+            <View isHidden={allErrorsMessages.length > 0} marginEnd='auto' />
+            <View isHidden={allErrorsMessages.length === 0} marginEnd='auto'>
+              <ErrorIndicator errors={allErrorsMessages} />
             </View>
             <TooltipTrigger delay={0}>
               <ActionButton

packages/spectrum/src/complex/array/SpectrumArrayControlRenderer.tsx

@@ -51,17 +51,6 @@ const SpectrumArrayControlRenderer = ({
     schema
   );
   const label = labelDescription.show ? labelDescription.text : '';
-  // const controlClassName =
-  //     `control ${(Helpers.convertToValidClassName(controlElement.scope))}`;
-  // const fieldSetClassName = getStyleAsClassName('array.layout');
-  // const buttonClassName = getStyleAsClassName('array.button');
-  // const childrenClassName = getStyleAsClassName('array.children');
-  // const classNames: { [className: string]: string } = {
-  //     wrapper: controlClassName,
-  //     fieldSet: fieldSetClassName,
-  //     button: buttonClassName,
-  //     children: childrenClassName
-  // };
 
   return (
     <SpectrumArrayControl

packages/spectrum/src/components/ErrorIndicator.tsx

@@ -0,0 +1,50 @@
+/*
+  The MIT License
+
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+
+  Copyright (c) 2020 headwire.com, Inc
+  https://github.com/headwirecom/jsonforms-react-spectrum-renderers
+
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+
+import React from 'react';
+import { Button, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
+import AlertCircle from '@spectrum-icons/workflow/AlertCircle';
+
+export function ErrorIndicator({ errors }: { errors: string }) {
+  return (
+    <TooltipTrigger delay={0}>
+      <Button
+        aria-label='error-indicator'
+        isQuiet
+        variant='negative'
+        margin='size-50'
+        minWidth='size-0'
+        width='size-10'
+      >
+        <AlertCircle color='negative' />
+      </Button>
+      <Tooltip>{errors}</Tooltip>
+    </TooltipTrigger>
+  );
+}

packages/spectrum/test/renderers/SpectrumTableArrayControl.test.tsx

@@ -391,7 +391,9 @@ describe('validations messages', () => {
     const data = { test: 2 };
     const { getByRole } = renderForm(fixture.uischema, fixture.schema, data);
 
-    expect(getByRole('button', { name: /validation/ })).toBeInTheDocument();
+    expect(
+      getByRole('button', { name: /error-indicator/ })
+    ).toBeInTheDocument();
   });
 
   test('empty errors by default', () => {
@@ -402,7 +404,7 @@ describe('validations messages', () => {
     );
 
     expect(() => {
-      getByRole('button', { name: /validation/ });
+      getByRole('button', { name: /error-indicator/ });
     }).toThrow();
   });
 });