Displays relationships tab on side panel

app/api/migrations/migrations/107-add_system_key_translations/index.js

@@ -0,0 +1,60 @@
+/*
+This migration is meant to be repeatable.
+After copy pasting:
+  - change the contents of system_keys.csv to the new keyset
+  - change the file location in the readCsvToSystemKeys call
+  - change the tests, if necessary
+*/
+
+async function insertSystemKeys(db, newKeys) {
+  const translations = await db.collection('translations').find().toArray();
+  const locales = translations.map(tr => tr.locale);
+
+  const locToSystemContext = {};
+  translations.forEach(tr => {
+    locToSystemContext[tr.locale] = tr.contexts.find(c => c.id === 'System');
+  });
+  const locToKeys = {};
+  Object.entries(locToSystemContext).forEach(([loc, context]) => {
+    locToKeys[loc] = new Set(context.values.map(v => v.key));
+  });
+
+  newKeys.forEach(row => {
+    const { key, value: optionalValue } = row;
+
+    locales.forEach(loc => {
+      if (!locToKeys[loc].has(key)) {
+        const newValue = optionalValue || key;
+        locToSystemContext[loc].values.push({ key, value: newValue });
+        locToKeys[loc].add(key);
+      }
+    });
+  });
+
+  await Promise.all(
+    translations.map(tr => db.collection('translations').replaceOne({ _id: tr._id }, tr))
+  );
+}
+
+export default {
+  delta: 107,
+
+  reindex: false,
+
+  name: 'add_system_key_translations',
+
+  description: 'Adding missing translations for system keys.',
+
+  async up(db) {
+    process.stdout.write(`${this.name}...\r\n`);
+    const systemKeys = [
+      {
+        key: 'Collapse all',
+      },
+      {
+        key: 'Expand all',
+      },
+    ];
+    await insertSystemKeys(db, systemKeys);
+  },
+};

app/api/migrations/migrations/107-add_system_key_translations/specs/107-add_system_key_translations.spec.js

@@ -0,0 +1,65 @@
+import { testingDB } from 'api/utils/testing_db';
+import migration from '../index.js';
+import { fixtures, templateId, defaultTemplateName, defaultTemplateTitle } from './fixtures.js';
+
+const locales = ['en', 'es', 'hu'];
+const newKeyValues = [
+  {
+    key: 'Collapse all',
+    value: 'Collapse all',
+  },
+  { key: 'Expand all', value: 'Expand all' },
+];
+const alreadyInAllContexts = {
+  key: 'Duplicated label',
+  en: 'Duplicated label',
+  es: 'Nombre duplicado',
+  hu: 'Ismétlődő címke',
+};
+
+describe('migration add_system_key_translations', () => {
+  beforeEach(async () => {
+    spyOn(process.stdout, 'write');
+    await testingDB.setupFixturesAndContext(fixtures);
+  });
+
+  afterAll(async () => {
+    await testingDB.disconnect();
+  });
+
+  it('should have a delta number', () => {
+    expect(migration.delta).toBe(107);
+  });
+
+  it('should append new keys, leave existing keys intact.', async () => {
+    await migration.up(testingDB.mongodb);
+
+    const allTranslations = await testingDB.mongodb.collection('translations').find().toArray();
+    function testKeyValue(key, value, locale, contextId) {
+      expect(
+        allTranslations
+          .find(tr => tr.locale === locale)
+          .contexts.find(c => c.id === contextId)
+          .values.find(v => v.key === key).value
+      ).toBe(value);
+    }
+
+    newKeyValues.forEach(({ key, value }) => {
+      locales.forEach(loc => {
+        testKeyValue(key, value, loc, 'System');
+      });
+    });
+    locales.forEach(loc => {
+      testKeyValue(alreadyInAllContexts.key, alreadyInAllContexts[loc], loc, 'System');
+    });
+    locales.forEach(loc => {
+      expect(
+        allTranslations
+          .find(tr => tr.locale === loc)
+          .contexts.find(c => c.id === templateId.toString()).values
+      ).toHaveLength(2);
+      testKeyValue(defaultTemplateName, defaultTemplateName, loc, templateId.toString());
+      testKeyValue(defaultTemplateTitle, defaultTemplateTitle, loc, templateId.toString());
+    });
+  });
+});

app/api/migrations/migrations/107-add_system_key_translations/specs/fixtures.js

@@ -0,0 +1,90 @@
+import db from 'api/utils/testing_db';
+
+const templateId = db.id();
+const defaultTemplateName = 'default template';
+const defaultTemplateTitle = 'Title';
+
+//contexts
+const commonContext = {
+  id: 'System',
+  label: 'User Interface',
+  type: 'Uwazi UI',
+  values: [
+    {
+      key: 'existing-key-in-system',
+      value: 'existing-key-in-system',
+    },
+  ],
+};
+const templateContext = {
+  id: templateId.toString(),
+  label: defaultTemplateName,
+  type: 'Entity',
+  values: [
+    {
+      key: defaultTemplateName,
+      value: defaultTemplateName,
+    },
+    {
+      key: defaultTemplateTitle,
+      value: defaultTemplateTitle,
+    },
+  ],
+};
+
+const fixtures = {
+  templates: [
+    //default template name - correct
+    {
+      _id: templateId,
+      name: defaultTemplateName,
+      commonProperties: [{ name: 'title', label: defaultTemplateTitle, type: 'text' }],
+      properties: [],
+    },
+  ],
+  translations: [
+    {
+      _id: db.id(),
+      locale: 'es',
+      contexts: [
+        {
+          ...commonContext,
+          values: commonContext.values.concat([
+            { key: 'Drag properties here', value: 'Arrastra propiedades aquí' },
+            { key: 'Duplicated label', value: 'Nombre duplicado' },
+          ]),
+        },
+        templateContext,
+      ],
+    },
+    {
+      _id: db.id(),
+      locale: 'en',
+      contexts: [
+        {
+          ...commonContext,
+          values: commonContext.values.concat([
+            { key: 'Priority sorting', value: 'Priority sort' },
+            { key: 'Duplicated label', value: 'Duplicated label' },
+          ]),
+        },
+        templateContext,
+      ],
+    },
+    {
+      _id: db.id(),
+      locale: 'hu',
+      contexts: [
+        {
+          ...commonContext,
+          values: commonContext.values.concat([
+            { key: 'Duplicated label', value: 'Ismétlődő címke' },
+          ]),
+        },
+        templateContext,
+      ],
+    },
+  ],
+};
+
+export { fixtures, templateId, defaultTemplateName, defaultTemplateTitle };

app/react/App/Collapsible.tsx

@@ -0,0 +1,31 @@
+import { Icon } from 'UI';
+import React, { ReactElement, useEffect, useState } from 'react';
+
+interface CollapsibleProps {
+  className?: string;
+  header: string | HTMLElement;
+  headerInfo?: string;
+  children: ReactElement<any, any>;
+  collapse?: boolean;
+}
+
+const Collapsible = ({ header, children, className, headerInfo, collapse }: CollapsibleProps) => {
+  const [collapsed, setCollapsed] = useState(collapse);
+  useEffect(() => {
+    setCollapsed(collapse);
+  }, [collapse]);
+  return (
+    <div className={className}>
+      <div className="header" onClick={() => setCollapsed(!collapsed)}>
+        <span className="header-icon">
+          <Icon icon={collapsed ? 'caret-right' : 'caret-down'} />
+        </span>
+        <span>{header}</span>
+        {headerInfo && <span className="header-info">{headerInfo}</span>}
+      </div>
+      {!collapsed && <div className="content">{children}</div>}
+    </div>
+  );
+};
+
+export { Collapsible };

app/react/App/StickyHeader.tsx

@@ -0,0 +1,60 @@
+import React, { LegacyRef, ReactElement, useEffect } from 'react';
+
+interface StickyHeaderProps {
+  children: ReactElement;
+  scrollElementSelector: string;
+  stickyElementSelector: string;
+}
+
+const getMeasurements = (target: HTMLElement, current: HTMLElement) => {
+  const parentTop = target.getBoundingClientRect().top;
+  const scrollerTop = target.scrollTop;
+  const stickyTop = current.offsetTop || 0;
+  const stickyBottom = stickyTop + current.offsetHeight;
+  return {
+    scrollerTop,
+    stickyTop,
+    stickyBottom,
+    parentTop,
+  };
+};
+
+const eventHandler = (self: any, stickyElementSelector: string, event: Event) => {
+  if (self && self.current && event.target && event.target instanceof Element) {
+    const { current } = self;
+    const stickyElement: HTMLElement = current.querySelector(stickyElementSelector);
+    current.classList.remove('sticky');
+    const { scrollerTop, stickyTop, stickyBottom, parentTop } = getMeasurements(
+      event.target as HTMLElement,
+      current
+    );
+
+    if (stickyTop < scrollerTop && stickyBottom > scrollerTop) {
+      current.classList.add('sticky');
+      if (stickyElement) {
+        stickyElement.style.top = `${parentTop}px`;
+      }
+    }
+  }
+};
+
+const StickyHeader = (props: StickyHeaderProps) => {
+  const { children, scrollElementSelector, stickyElementSelector } = props;
+  const self: LegacyRef<HTMLDivElement> = React.createRef();
+  const body = document.querySelector<HTMLDivElement>(scrollElementSelector);
+  useEffect(() => {
+    body?.addEventListener('scroll', event => {
+      eventHandler(self, stickyElementSelector, event);
+    });
+
+    return () => {
+      body?.removeEventListener('scroll', event =>
+        eventHandler(self, stickyElementSelector, event)
+      );
+    };
+  });
+
+  return <div ref={self}>{children}</div>;
+};
+
+export { StickyHeader };

app/react/App/scss/layout/_footer.scss

@@ -1,3 +1,12 @@
+@mixin relationshipsFooterButtons {
+  .relationships-right-buttons {
+    float: right;
+  }
+  .relationships-left-buttons {
+    width: 50%;
+  }
+}
+
 footer {
   margin: 30px 0 0;
   padding: 20px 0 15px;
@@ -237,6 +246,8 @@ footer {
   .btn:disabled .btn-label {
     color: $c-grey !important;
   }
+
+  @include relationshipsFooterButtons();
 }
 
 @media (max-width: 1023px) {
@@ -259,6 +270,7 @@ footer {
 
   .sidepanel-footer {
     width: 400px;
+    @include relationshipsFooterButtons();
   }
 
   .entity-footer,