GH-15 Form with no-data rendering

src/util/ContextToProps.tsx

@@ -59,7 +59,6 @@ export const withStoreToControlProps = (Component: React.FC<ControlComponent>):
     }>(successValidation);
 
     const { form } = props;
-    const controlProps = mapStateToControlProps(props);
 
     const [id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] = processViewKindOverride(
       props,
@@ -69,12 +68,9 @@ export const withStoreToControlProps = (Component: React.FC<ControlComponent>):
     const coll = collIriOverride ? store.getColl(collIriOverride) : undefined;
     let collData = coll?.data;
     if (collData) collData = getSnapshot(collData);
+    const controlProps = mapStateToControlProps({ ...props, data: collData });
 
-    if (!collData || collData.length === 0) {
-      return <Spin />;
-    }
-
-    const data = collData[0];
+    const data = collData.length !== 0 ? collData[0] : {};
     const onValidate = (data: any) => {
       if (viewKindElement.options && Array.isArray(viewKindElement.options.validation)) {
         const validation = viewKindElement.options.validation;
@@ -221,16 +217,17 @@ export const withStoreToCellProps = (Component: React.FC<any>): React.FC<any> =>
   observer<any>((props: any) => {
     const { data, onMeasureChange, height, uri, CKey, rowData, viewKindElement } = props;
     const path = viewKindElement.scope ? viewKindElement.scope.split('/').join('.') : null;
-    const controlProps = mapStateToControlProps(props);
     /*const { store } = useRootCtx();
     const onSave = (data: any) => {
       let newData: any = {};
       newData[CKey] = data;
       store.saveCellData(newData, uri, rowData['@id']);
     };*/
+    const cellData = path ? get(data, path) : data;
+    const controlProps = mapStateToControlProps({ ...props, data: cellData });
     return (
       <Component
-        data={path ? get(data, path) : data}
+        data={cellData}
         height={height}
         rowData={rowData}
         onMeasureChange={onMeasureChange}
@@ -588,7 +585,7 @@ export const withStoreToSaveDialogProps = (Component: React.FC<SaveDialog>): Rea
     return <Component visible={visible} onOk={onSave} onCancel={onCancel} />;
   });
 
-const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, enabled }: ToControlProps) => {
+const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, data }: ToControlProps & { data: any }) => {
   const pathSegments = id.split('/');
   const path = pathSegments.join('.properties.');
   const visible = checkProperty('visible', path, viewKindElement, viewKind);
@@ -600,11 +597,12 @@ const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, enabled
   const labelDesc = createLabelDescriptionFrom(viewKindElement as any, schema);
   const label = labelDesc.show ? (labelDesc.text as string) : '';
   const key = pathSegments[1];
+  const enabled = data && (editable ?? true);
   return {
     description,
     label,
     visible,
-    enabled: editable === 'undefined' ? true : editable,
+    enabled,
     required,
     uiOptions,
     key,

stories/Form.stories.tsx

@@ -13,7 +13,7 @@ import { Meta, Story } from '@storybook/react';
 
 import { Provider } from 'react-redux';
 import { asReduxStore, connectReduxDevtools } from 'mst-middlewares';
-import { SparqlClientImpl, rootModelInitialState, CollState } from '@agentlab/sparql-jsld-client';
+import { SparqlClientImpl, rootModelInitialState, CollState, JsObject } from '@agentlab/sparql-jsld-client';
 
 import {
   RendererRegistryEntry,
@@ -98,29 +98,44 @@ const viewDescrs = [
   },
 ];
 
-const additionalColls: CollState[] = [
-  // ViewKinds Collection
-  {
-    constr: viewKindCollConstr,
-    data: viewKinds,
-    opt: {
-      updPeriod: undefined,
-      lastSynced: moment.now(),
-      //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs
+const createAdditionalColls = (viewKinds: any, data: JsObject[] | undefined): CollState[] => {
+  const additionalColls = [
+    // ViewKinds Collection
+    {
+      constr: viewKindCollConstr,
+      data: viewKinds,
+      opt: {
+        updPeriod: undefined,
+        lastSynced: moment.now(),
+        //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs
+      },
     },
-  },
-  // ViewDescrs Collection
-  {
-    constr: viewDescrCollConstr,
-    data: viewDescrs,
-    opt: {
-      updPeriod: undefined,
-      lastSynced: moment.now(),
-      //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server
-      // for viewDescrs.collConstrs (it loads lazily -- after the first access)
+    // ViewDescrs Collection
+    {
+      constr: viewDescrCollConstr,
+      data: viewDescrs,
+      opt: {
+        updPeriod: undefined,
+        lastSynced: moment.now(),
+        //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server
+        // for viewDescrs.collConstrs (it loads lazily -- after the first access)
+      },
     },
-  },
-];
+  ];
+  if (data) {
+    additionalColls.push({
+      constr: viewKinds[0].collsConstrs[0],
+      data,
+      opt: {
+        updPeriod: undefined,
+        lastSynced: moment.now(),
+        //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server
+        // for viewDescrs.collConstrs (it loads lazily -- after the first access)
+      },
+    });
+  }
+  return additionalColls;
+};
 
 export default {
   title: 'Form/ArtifactForm',
@@ -134,7 +149,12 @@ const Template: Story<any> = (args: any) => {
   const antdRenderers: RendererRegistryEntry[] = [...antdControlRenderers, ...antdLayoutRenderers];
 
   const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server');
-  const rootStore = createUiModelFromState('reqs2', client, rootModelInitialState, additionalColls);
+  const rootStore = createUiModelFromState(
+    'reqs2',
+    client,
+    rootModelInitialState,
+    createAdditionalColls(args.viewKinds || viewKinds, args.data),
+  );
   const store: any = asReduxStore(rootStore);
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   connectReduxDevtools(require('remotedev'), rootStore);
@@ -151,3 +171,24 @@ const Template: Story<any> = (args: any) => {
 
 export const RemoteData = Template.bind({});
 RemoteData.args = {};
+
+export const ObjectWithNullProperty = Template.bind({});
+ObjectWithNullProperty.args = {
+  data: [
+    {
+      creator: null,
+      assetFolder: null,
+      description: 'TestDescr',
+    },
+  ],
+};
+
+export const EmptyObject = Template.bind({});
+EmptyObject.args = {
+  data: [{}],
+};
+
+export const NoObject = Template.bind({});
+NoObject.args = {
+  data: [{}],
+};