Show delete errors in modal instead of in a notification

src/components/blocks/FormError.js

@@ -13,7 +13,7 @@ const FormErrorContainer = styled.div`
   font-weight: 500;
   text-align: left;
   ${props => props.grid && `grid-column: 2;`}
-  & > span {
+  & > div {
     margin-left: 0.5rem;
   }
   & ul {
@@ -28,7 +28,7 @@ const FormErrorContainer = styled.div`
 const FormError = props => (
   <FormErrorContainer {...props}>
     <ErrorIcon />
-    <span>
+    <div>
       {typeof props.message === 'object' && props.message.length ? (
         <ul>
           {props.message.map((message, i) => (
@@ -38,7 +38,7 @@ const FormError = props => (
       ) : (
         props.message
       )}
-    </span>
+    </div>
   </FormErrorContainer>
 );
 

src/components/blocks/Modal.js

@@ -17,6 +17,10 @@ const Overlay = styled.div`
 `;
 
 const ModalContainer = styled.div`
+  max-height: calc(100% - 2rem);
+  max-width: 700px;
+  overflow: auto;
+  margin: 1rem;
   padding: 2rem;
   border-radius: 0.5rem;
   background: #FFF;

src/components/blocks/TableContent.js

@@ -9,6 +9,7 @@ import Checkbox from '../elements/Checkbox.js';
 import TableMenu from '../blocks/TableMenu.js';
 import Loader from '../blocks/Loader.js';
 import Modal from '../blocks/Modal.js';
+import FormError from '../blocks/FormError.js';
 
 const Td = styled.td`
   padding: 0.5rem 0;
@@ -132,10 +133,11 @@ const TableContent = props => {
   //=============================================================================
   // Handle Deleting content
   //=============================================================================
+  const [ errorMessage, setErrorMessage ] = useState('');
   const deleteContent = async () => {
     setShowModalLoader(true);
-    const success = await props.deleteContent(contentToDelete);
-    if (success) {
+    const result = await props.deleteContent(contentToDelete);
+    if (result === 'success') {
       const newContent = await props.getContent();
       sortTableContent({ newContent });
       setContentToDelete({});
@@ -144,7 +146,10 @@ const TableContent = props => {
         level: 'success',
         message: `${props.name.charAt(0).toUpperCase()}${props.name.slice(1)} deleted successfully`,
       });
+    } else {
+      setErrorMessage(result);
     }
+    setSelected([]);
     setShowModalLoader(false);
   };
 
@@ -159,27 +164,35 @@ const TableContent = props => {
           content={
             showModalLoader
               ? <Loader />
-              : <table>
-                  <tbody>
-                    {props.formatContentToDelete(contentToDelete).map((d, i) => (
-                      <tr key={i}>
-                        <Td>{d.name}</Td>
-                        <Td>
-                          {typeof d.content === 'string'
-                            ? d.content
-                            : <ul>
-                                {d.content.map((c, i) => (
-                                  <li key={i}>{c}</li>
-                                ))}
-                              </ul>
-                          }
-                        </Td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
+              : <div>
+                  <table>
+                    <tbody>
+                      {props.formatContentToDelete(contentToDelete).map((d, i) => (
+                        <tr key={i}>
+                          <Td>{d.name}</Td>
+                          <Td>
+                            {typeof d.content === 'string'
+                              ? d.content
+                              : <ul>
+                                  {d.content.map((c, i) => (
+                                    <li key={i}>{c}</li>
+                                  ))}
+                                </ul>
+                            }
+                          </Td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                  {errorMessage && (
+                    <FormError message={errorMessage} />
+                  )}
+                </div>
           }
-          handleCancel={() => setContentToDelete({})}
+          handleCancel={() => {
+            setContentToDelete({});
+            setErrorMessage('');
+          }}
           handleSubmit={deleteContent}
           actionText="Delete"
         />