Easily add thesauri value when editing an entity

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

@@ -0,0 +1,70 @@
+/*
+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: 112,
+
+  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: 'Group',
+      },
+
+      {
+        key: 'Add thesaurus value',
+      },
+      {
+        key: 'Value',
+      },
+      {
+        key: 'add value',
+      },
+      {
+        key: 'Duplicate values not allowed.',
+      },
+    ];
+    await insertSystemKeys(db, systemKeys);
+  },
+};

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

@@ -0,0 +1,81 @@
+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: 'Group',
+    value: 'Group',
+  },
+
+  {
+    key: 'Add thesaurus value',
+    value: 'Add thesaurus value',
+  },
+  {
+    key: 'Value',
+    value: 'Value',
+  },
+  {
+    key: 'add value',
+    value: 'add value',
+  },
+  {
+    key: 'Duplicate values not allowed.',
+    value: 'Duplicate values not allowed.',
+  },
+];
+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(112);
+  });
+
+  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/112-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/scss/layout/_sidepanel.scss

@@ -430,3 +430,23 @@ $c-sidebar: $c-white;
     }
   }
 }
+
+.add-thesauriValue-modal {
+  .error {
+    color: $c-type-1;
+    font-size: 0.9em;
+  }
+
+  .thesauri-group {
+    margin-bottom: 10px;
+  }
+
+  .cancel-button {
+    background-color: #eceff1;
+    border-color: #cfd8dc;
+    &:hover {
+      border-color: #3655ba;
+      color: #3655ba;
+    }
+  }
+}

app/react/App/scss/modules/_metadata-view.scss

@@ -200,6 +200,17 @@ dl.metadata-type-geolocation_group {
 .metadata-extractor-container {
   position: relative;
 
+  .multiselect-add-value {
+    button {
+      border: none;
+      background: none;
+      font-size: $f-size-xs;
+      color: $c-primary;
+      padding-left: 0px;
+      margin: 0.2em 0 0 auto;
+    }
+  }
+
   .extraction-button {
     position: absolute;
     background: none;

app/react/Forms/components/MarkDown.tsx

@@ -17,7 +17,7 @@ export class MarkDown extends Component<MarkDownType> {
       <div className="markdownEditor">
         <Tabs renderActiveTabContentOnly>
           <div className="tab-nav">
-            <TabLink to="edit" default>
+            <TabLink to="edit" default component="div">
               <Translate>Edit</Translate>
             </TabLink>
             {showPreview && (

app/react/Metadata/components/AddThesauriValueButton.tsx

@@ -0,0 +1,31 @@
+import { Translate } from 'app/I18N';
+import React, { useState } from 'react';
+import AddThesauriValueModal from './AddThesauriValueModal';
+
+interface AddThesauriValueButtonProps {
+  values: any[];
+  onModalAccept: Function;
+}
+const AddThesauriValueButton = ({ values, onModalAccept }: AddThesauriValueButtonProps) => {
+  const [openModal, setOpenModal] = useState(false);
+  return (
+    <>
+      <AddThesauriValueModal
+        values={values}
+        isOpen={openModal}
+        onCancel={() => setOpenModal(false)}
+        onAccept={(addedValues: any) => {
+          setOpenModal(false);
+          onModalAccept(addedValues);
+        }}
+      />
+      <div className="multiselect-add-value">
+        <button type="button" onClick={() => setOpenModal(true)}>
+          <Translate>add value</Translate>
+        </button>
+      </div>
+    </>
+  );
+};
+
+export { AddThesauriValueButton };