Merge pull request #1536 from BlueBrain/4912/validation-error-when-up…

…dating-resources 4912 // Show validation error when updating resources
BlueBrain · May 14, 2024 · 39df20f · 39df20f
2 parents 0438681 + 738cb9c
commit 39df20f
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 47 deletions.
diff --git a/src/shared/components/IDResolution/ResponseViewer.tsx b/src/shared/components/IDResolution/ResponseViewer.tsx
@@ -4,20 +4,28 @@ type Props = {
   data: any;
   header?: string;
   showHeader?: boolean;
+  collapsed?: boolean;
+  style?: React.CSSProperties;
 };
 
-const ResponseViewer = ({ data, showHeader = false, header = '' }: Props) => {
+const ResponseViewer = ({
+  data,
+  showHeader = false,
+  header = '',
+  collapsed = false,
+  style = {},
+}: Props) => {
   return (
     <ReactJson
-      collapsed
+      collapsed={collapsed}
       name={showHeader ? header : undefined}
       src={data as object}
       indentWidth={3}
       iconStyle="square"
       enableClipboard={false}
       displayObjectSize={false}
       displayDataTypes={false}
-      style={{ maxWidth: 'inherit', width: '600px' }}
+      style={{ maxWidth: 'inherit', width: '600px', ...style }}
     />
   );
 };

diff --git a/src/shared/containers/ResourceViewContainer.tsx b/src/shared/containers/ResourceViewContainer.tsx
@@ -43,6 +43,7 @@ import VideoPluginContainer from './VideoPluginContainer/VideoPluginContainer';
 import { useMutation } from 'react-query';
 
 export const DEFAULT_ACTIVE_TAB_KEY = '#JSON';
+import ResponseViewer from '../../shared/components/IDResolution/ResponseViewer';
 
 export type PluginMapping = {
   [pluginKey: string]: object;
@@ -707,48 +708,67 @@ const ResourceViewContainer: FC<{
 
         <Spin spinning={busy}>
           {!!error ? (
-            <Alert
-              message={
-                error.wasUpdated ? 'Resource updated with errors' : 'Error'
-              }
-              showIcon
-              closable
-              style={{ marginTop: 40 }}
-              type="error"
-              description={
-                <>
-                  <Typography.Paragraph
-                    ellipsis={{ rows: 2, expandable: true }}
-                  >
-                    {error.message}
-                  </Typography.Paragraph>
-                  {error.rejections && (
-                    <Collapse bordered={false} ghost>
-                      <Collapse.Panel key={1} header="More detail...">
-                        <>
-                          <ul>
-                            {error.rejections.map((el, ix) => (
-                              <li key={ix}>{el.reason}</li>
-                            ))}
-                          </ul>
-
-                          <p>
-                            For further information please refer to the API
-                            documentation,{' '}
-                            <a
-                              target="_blank"
-                              href="https://bluebrainnexus.io/docs/delta/api"
-                            >
-                              https://bluebrainnexus.io/docs/delta/api
-                            </a>
-                          </p>
-                        </>
-                      </Collapse.Panel>
-                    </Collapse>
-                  )}
-                </>
-              }
-            />
+            <>
+              <Alert
+                message={
+                  error.wasUpdated ? 'Resource updated with errors' : 'Error'
+                }
+                showIcon
+                closable
+                style={{ marginTop: 40 }}
+                type="error"
+                description={
+                  <>
+                    <Typography.Paragraph
+                      ellipsis={{ rows: 2, expandable: true }}
+                    >
+                      {error.message}
+                    </Typography.Paragraph>
+                    {error.rejections && (
+                      <Collapse bordered={false} ghost>
+                        <Collapse.Panel key={1} header="More detail...">
+                          <>
+                            <ul>
+                              {error.rejections.map((el, ix) => (
+                                <li key={ix}>{el.reason}</li>
+                              ))}
+                            </ul>
+
+                            <p>
+                              For further information please refer to the API
+                              documentation,{' '}
+                              <a
+                                target="_blank"
+                                href="https://bluebrainnexus.io/docs/delta/api"
+                              >
+                                https://bluebrainnexus.io/docs/delta/api
+                              </a>
+                            </p>
+                          </>
+                        </Collapse.Panel>
+                      </Collapse>
+                    )}
+                  </>
+                }
+              />
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  marginTop: '28px',
+                }}
+              >
+                <ResponseViewer
+                  data={error}
+                  showHeader={false}
+                  style={{
+                    width: '1000px',
+                    background: 'white',
+                    padding: '10px',
+                  }}
+                />
+              </div>
+            </>
           ) : (
             <>
               {resource && (

diff --git a/src/subapps/studioLegacy/containers/StudioContainer.tsx b/src/subapps/studioLegacy/containers/StudioContainer.tsx
@@ -2,9 +2,8 @@ import * as React from 'react';
 import { Resource } from '@bbp/nexus-sdk';
 import { useNexusContext, AccessControl } from '@bbp/react-nexus';
 import { Empty, message } from 'antd';
-import { omitBy } from 'lodash';
 import { useHistory } from 'react-router';
-
+import { omitBy } from 'lodash';
 import EditStudio from '../components/EditStudio';
 import StudioHeader from '../components/StudioHeader';
 import StudioReactContext from '../contexts/StudioContext';