Adds conditional display on pages

app/react/Markdown/components/EntityData.tsx

@@ -9,7 +9,7 @@ import { showByType } from 'app/Metadata/components/Metadata';
 import { Translate } from 'app/I18N';
 import { IImmutable } from 'shared/types/Immutable';
 import { ensure } from 'shared/tsUtils';
-
+import { logError } from '../utils';
 export interface EntityDataProps {
   'value-of'?: string;
   'label-of'?: string;
@@ -66,14 +66,6 @@ const extractMetadataLabel = ({ formattedEntity, propertyName, newNameGeneration
   return <Translate context={propertyData.translateContext}>{propertyData.label}</Translate>;
 };
 
-const logError = (err: any, propValueOf?: string, propLabelOf?: string) => {
-  /* eslint-disable no-console */
-  console.error('Error on EntityData: ');
-  console.error('value-of: ', propValueOf, '; label-of: ', propLabelOf);
-  console.error(err);
-  /* eslint-enable no-console */
-};
-
 const getProperty = (
   propValueOf?: EntityDataProps['value-of'],
   propLabelOf?: EntityDataProps['label-of']

app/react/Markdown/components/EntitySection.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable react/no-multi-comp */
+import { connect, ConnectedProps } from 'react-redux';
+import React from 'react';
+import { IStore } from 'app/istore';
+import { logError } from '../utils';
+import { Section } from './Section';
+
+interface EntitySectionProps {
+  'show-if'?: string;
+  children: JSX.Element;
+}
+
+const mapStateToProps = ({ templates, entityView }: IStore) => ({
+  entity: entityView.entity,
+  templates,
+});
+
+const connector = connect(mapStateToProps);
+
+type MappedProps = ConnectedProps<typeof connector>;
+type ComponentProps = EntitySectionProps & MappedProps;
+
+const getPropertyValue = (property: any, metadataProperty: any) => {
+  switch (property.type) {
+    case 'multiselect':
+    case 'multidaterange':
+    case 'nested':
+    case 'multidate':
+    case 'geolocation':
+      return metadataProperty.map((v: any) => v.label || v.value);
+    case 'relationship': {
+      let value: any[] = [];
+      metadataProperty.forEach((v: any) => {
+        if (v.inheritedType && v.inheritedValue) {
+          const properties = getPropertyValue({ type: v.inheritedType }, v.inheritedValue);
+          value = Array.isArray(properties) ? [...value, ...properties] : [...value, properties];
+        } else {
+          value.push(v.label || v.value);
+        }
+      });
+      return Array.from(new Set(value));
+    }
+    case 'generatedid':
+      return typeof metadataProperty === 'string' ? metadataProperty : metadataProperty[0].value;
+    default:
+      return metadataProperty[0].label || metadataProperty[0].value;
+  }
+};
+
+// eslint-disable-next-line import/exports-last
+export const UnwrapMetadataObject = (MetadataObject: any, Template: any) =>
+  Object.keys(MetadataObject).reduce((UnwrapedMO, key) => {
+    if (!MetadataObject[key].length) {
+      return UnwrapedMO;
+    }
+    const property = Template.properties.find((p: any) => p.name === key);
+    const propertyValue = getPropertyValue(property, MetadataObject[key]);
+    return { ...UnwrapedMO, [key]: propertyValue };
+  }, {});
+
+// eslint-disable-next-line max-statements
+const EntitySection = ({ entity, templates, children, 'show-if': showIf }: ComponentProps) => {
+  const jsEntity = entity.toJS();
+  const template = templates.find(t => t?.get('_id') === jsEntity.template);
+  const unwrappedMetadata = UnwrapMetadataObject(jsEntity.metadata, template.toJS());
+  jsEntity.metadata = unwrappedMetadata;
+  try {
+    const condition = JSON.parse(showIf as string);
+    return (
+      <Section data={[jsEntity]} showIf={condition}>
+        {children}
+      </Section>
+    );
+  } catch (e) {
+    logError(e, showIf);
+    return null;
+  }
+};
+
+const container = connector(EntitySection);
+export { container as EntitySection };

app/react/Markdown/components/Section.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable react/no-multi-comp */
+import sift from 'sift';
+
+interface EntitySectionProps {
+  showIf: any;
+  children: JSX.Element;
+  data: any[];
+}
+
+// eslint-disable-next-line max-statements
+const Section = ({ data, children, showIf: condition }: EntitySectionProps) => {
+  const filtered = data.filter(sift(condition));
+  return filtered.length > 0 ? children : null;
+};
+
+export { Section };

app/react/Markdown/components/index.js

@@ -5,6 +5,7 @@ import { Icon } from 'UI';
 import Counter from './Counter';
 import ContactForm from './ContactForm';
 import { EntityData } from './EntityData';
+import { EntitySection } from './EntitySection';
 import EntityLink from './EntityLink';
 import ItemList from './ItemList';
 import Repeat from './Repeat';
@@ -66,4 +67,5 @@ export {
   Map,
   Link,
   EntityInfo,
+  EntitySection,
 };

app/react/Markdown/components/specs/EntityData.spec.tsx

@@ -3,9 +3,8 @@
  */
 import React from 'react';
 import { ReactWrapper } from 'enzyme';
-import Immutable from 'immutable';
 import { renderConnectedMount } from 'app/utils/test/renderConnected';
-
+import { state } from './fixture/state';
 import { EntityData } from '../EntityData';
 
 describe('EntityData Markdown', () => {
@@ -22,47 +21,6 @@ describe('EntityData Markdown', () => {
   });
 
   const render = (innerComponent: any) => {
-    const state = {
-      entityView: {
-        entity: Immutable.fromJS({
-          template: 't1',
-          title: 'Entity 1',
-          creationDate: 1234,
-          metadata: {
-            description: [{ value: 'A long description' }],
-            date: [{ value: 237600000 }],
-            main_image: [{ value: 'https://www.google.com' }],
-          },
-        }),
-      },
-      templates: Immutable.fromJS([
-        {
-          _id: 't1',
-          commonProperties: [{ name: 'title', label: 'Title' }],
-          properties: [
-            { name: 'description', type: 'text' },
-            { name: 'date', type: 'date' },
-            { name: 'main_image', label: 'Main Image', type: 'image' },
-          ],
-        },
-      ]),
-      thesauris: Immutable.fromJS([{}]),
-      translations: Immutable.fromJS([
-        {
-          locale: 'en',
-          contexts: [
-            {
-              id: 't1',
-              values: { Title: 'Title translated', 'Main Image': 'Main Image translated' },
-            },
-          ],
-        },
-      ]),
-      settings: { collection: Immutable.fromJS({ newNameGeneration: true }) },
-      inlineEdit: Immutable.fromJS({ inlineEdit: false }),
-      locale: 'en',
-    };
-
     component = renderConnectedMount(() => innerComponent, state);
   };
 

app/react/Markdown/components/specs/EntitySection.spec.tsx

@@ -0,0 +1,73 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { ReactWrapper } from 'enzyme';
+import { renderConnectedMount } from 'app/utils/test/renderConnected';
+import { state } from './fixture/state';
+import { EntitySection } from '../EntitySection';
+
+describe('EntitySection Markdown', () => {
+  let component: ReactWrapper<
+    Readonly<{}> & Readonly<{ children?: React.ReactNode }>,
+    Readonly<{}>,
+    React.Component<{}, {}, any>
+  >;
+  let consoleErrorSpy: jasmine.Spy;
+
+  beforeEach(() => {
+    consoleErrorSpy = jasmine.createSpy('consoleErrorSpy');
+    spyOn(console, 'error').and.callFake(consoleErrorSpy);
+  });
+
+  const render = (innerComponent: any) => {
+    component = renderConnectedMount(() => innerComponent, state);
+  };
+
+  const testShowIf = (showIf: string, expected: string) => {
+    render(
+      <EntitySection show-if={showIf}>
+        <div>test</div>
+      </EntitySection>
+    );
+    expect(component.html()).toBe(expected);
+  };
+
+  describe('root properties Values', () => {
+    it('should show if title and root dates of entity exists', () => {
+      testShowIf('{ "title": { "$exists": true }}', '<div>test</div>');
+      testShowIf('{ "creationDate": { "$exists": true }}', '<div>test</div>');
+    });
+    it('should not show if a root property does not exist', () => {
+      testShowIf('{ "titledoesntexist": { "$exists": true }}', '');
+    });
+  });
+
+  describe('metadata property Values', () => {
+    it('should show if unwrapped metadata properties exist', () => {
+      testShowIf('{ "metadata.description": { "$exists": true }}', '<div>test</div>');
+      testShowIf('{ "metadata.date": { "$exists": true }}', '<div>test</div>');
+      testShowIf('{ "metadata.main_image": { "$exists": true }}', '<div>test</div>');
+    });
+    it('should show if a metadata property matches a value', () => {
+      testShowIf('{ "metadata.description": { "$eq": "A long description" }}', '<div>test</div>');
+      testShowIf('{ "metadata.description": "A long description" }', '<div>test</div>');
+    });
+    it('should not show if a metadata property does not exist', () => {
+      testShowIf('{ "metadata.nonexistent": { "$exists": true }}', '');
+    });
+  });
+  describe('inherited Values', () => {
+    it('should show if inherited text exists', () => {
+      testShowIf('{ "metadata.inherited_text": { "$exists": true }}', '<div>test</div>');
+    });
+    it('should show if inherited text has a value', () => {
+      testShowIf('{ "metadata.inherited_text": { "$in": ["something"] }}', '<div>test</div>');
+      testShowIf('{ "metadata.inherited_text": { "$nin": ["something"] }}', '');
+    });
+    it('should not show if inherited text has no specified value', () => {
+      testShowIf('{ "metadata.inherited_text": { "$nin": ["here"] }}', '<div>test</div>');
+      testShowIf('{ "metadata.inherited_text": { "$in": ["here"] }}', '');
+    });
+  });
+});

app/react/Markdown/components/specs/fixture/state.ts

@@ -0,0 +1,59 @@
+import Immutable from 'immutable';
+
+const state = {
+  entityView: {
+    entity: Immutable.fromJS({
+      template: 't1',
+      title: 'Entity 1',
+      creationDate: 1234,
+      metadata: {
+        description: [{ value: 'A long description' }],
+        date: [{ value: 237600000 }],
+        main_image: [{ value: 'https://www.google.com' }],
+        inherited_text: [
+          {
+            value: '7ycel666l65vobt9',
+            label: 'Corte Interamericana de Derechos Humanos',
+            icon: null,
+            type: 'relationship',
+            inheritedValue: [
+              {
+                value: 'something',
+              },
+            ],
+            inheritedType: 'text',
+          },
+        ],
+      },
+    }),
+  },
+  templates: Immutable.fromJS([
+    {
+      _id: 't1',
+      commonProperties: [{ name: 'title', label: 'Title' }],
+      properties: [
+        { name: 'description', type: 'text' },
+        { name: 'date', type: 'date' },
+        { name: 'main_image', label: 'Main Image', type: 'image' },
+        { name: 'inherited_text', label: 'Inherited Text', type: 'relationship' },
+      ],
+    },
+  ]),
+  thesauris: Immutable.fromJS([{}]),
+  translations: Immutable.fromJS([
+    {
+      locale: 'en',
+      contexts: [
+        {
+          id: 't1',
+          values: { Title: 'Title translated', 'Main Image': 'Main Image translated' },
+        },
+      ],
+    },
+  ]),
+  settings: { collection: Immutable.fromJS({ newNameGeneration: true }) },
+  inlineEdit: Immutable.fromJS({ inlineEdit: false }),
+  locale: 'en',
+};
+
+export { state };

app/react/Markdown/utils.js

@@ -5,3 +5,11 @@ export const objectPath = (path, object) =>
     }
     return o.toJS ? o.get(key) : o[key];
   }, object);
+
+export const logError = (err, propValueOf, propLabelOf) => {
+  /* eslint-disable no-console */
+  console.error('Error on EntityData: ');
+  console.error('value-of: ', propValueOf, '; label-of: ', propLabelOf);
+  console.error(err);
+  /* eslint-enable no-console */
+};